SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Location
    Melbourne,Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Jquery -remembering visible -sidedown issue

    I have following code

    jquery
    Code JavaScript:
    $('#menucoloups > li > ul')
            .hide()
            .click(function(e) {
            e.stopPropagation();
            });
            $('#menucoloups > li').toggle(function() {
            $(this).find('ul').slideDown();
            }, function() {
            $(this).find('ul').slideUp();
            });


    HTML
    Code HTML4Strict:
     
     
    <ul id="menucoloups">
     
    <li><a href="#">student_name1</a>
     
    <ul >
     <li><a href="show_act?catid=11&stuid=1">activity11</a></li>
     <li><a href="show_act?catid=20&stuid=21">activity21</a></li>
    </ul>
     
    </li>
     
    <li><a href="#">student_name2</a>
     
    <ul >
     <li><a href="show_act?catid=1&stuid=2">activity1</a></li>
     <li><a href="show_act?catid=20&stuid=2">activity20</a></li>
    </ul>
     
    </li>

    slideup and down working perfectly.
    However, if I click activity21(for example) it call show_act and hide all the menus and show student_name1&2. I understand that
    it is because it initially hide the menu when it load the page.
    Code JavaScript:
    .hide()
            .click(function(e) {

    What I want is to slidedown the corresponding activity if clicked.

    If someone click activity21,
    it will show
    <li><a href="#">student_name1</a>

    <ul >
    <li><a href="show_act?catid=11&stuid=1">activity11</a></li>
    <li><a href="show_act?catid=20&stuid=21">activity21</a></li>
    </ul>

    </li>

    and
    hide li under student_name2.
    <ul >
    <li><a href="show_act?catid=1&stuid=2">activity1</a></li>
    <li><a href="show_act?catid=20&stuid=2">activity20</a></li>
    </ul>


    Hope it is clear!. Any help appreciated.
    Thanks.

  2. #2
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if I am understanding the effect you are after.

    1) At load all the sublists are hidden

    2) When a list item is click if its sublist is NOT being shown then any shown sublist should be hidden and the sublist of the item clicked shown.

    3) When a list item is click if its sublist is being shown then the sublist is hidden.

    This can be achieved by using the click event and using a class to flag the current sublist.

    Code HTML4Strict:
    <html>
    <head>
    <script type="text/javascript" src="/akstonbridge/scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    		// hide all the sublists
    		$('#menucoloups > li > ul').hide();
    		// if an element in a sublist is clicked don't propagate it
    		$('#menucoloups > li > ul > li').click(function (evt) {
    						evt.stopPropagation();
    					});
    		// an list item is clicked
    		$('#menucoloups li').click(function(evt) {
    								// if this is the one that is open then close it
    								if ($(this).hasClass("slid")) {
    									$(this).slideUp();
    									$(this).removeClass("slid");
    								} else {
    								// otherwise close any that are open and open this one
    									$(".slid").slideUp();
    									$(".slid").removeClass("slid");
    									$(this).find('ul').addClass("slid").slideDown();
    								}
    								evt.preventDefault();
    						});
    });
    </script>
    </head>
    <body>
    <ul id="menucoloups">
     
    <li><a href="#">student_name1</a>
     
    <ul >
     <li><a href="show_act?catid=11&stuid=1">activity11</a></li>
     <li><a href="show_act?catid=20&stuid=21">activity12</a></li>
    </ul>
     
    </li>
     
    <li><a href="#">student_name2</a>
     
    <ul >
     <li><a href="show_act?catid=1&stuid=2">activity21</a></li>
     <li><a href="show_act?catid=20&stuid=2">activity22</a></li>
    </ul>
     
    </li>
    <li><a href="#">student_name3</a>
     
    <ul >
     <li><a href="show_act?catid=1&stuid=2">activity31</a></li>
     <li><a href="show_act?catid=20&stuid=2">activity32</a></li>
    </ul>
     
    </li>
    </body>

  3. #3
    SitePoint Member
    Join Date
    Nov 2006
    Location
    Melbourne,Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks for reply. What I want is - nested ul/li list, keep expanded after reload of page.
    So I use cookie to hold the li value and display that .
    I am using cookie plugin
    http://plugins.jquery.com/files/jquery.cookie.js.txt

    But it is not working

    HTML Code:
        $('#menucoloupsmore > li > ul').hide()
          
      
            .click(function(e) {
            e.stopPropagation();
            });
            $("#menucoloupsmore >li>ul>li").click(function(){
         var leftcol= $(this).find('ul');
         leftcol.slideDown(); 
           $.cookie('cstate', 'expanded');
           $.cookie('expanval',leftcol);
         });
         
           var getcokival=$.cookie('expanval');
           var getcokilval=$.cookie('cstate');
         if(getcokilval=='expanded') getcokival.slideDown();    
           
           
            $('#menucoloupsmore > li').toggle(function() {
            
            $(this).find('ul').slideDown();
            }, function() {
            $(this).find('ul').slideUp();
            });
    Hope it is clear.

  4. #4
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var leftcol= $(this).find('ul');
    leftcol.slideDown();
    $.cookie('cstate', 'expanded');
    $.cookie('expanval',leftcol);
    What you are trying to do is store a jquery object, leftcol, in a cookie. You can only store a string. The better approach is to give get entry a unique id and store that

    $.cookie('expanval',leftcol.prop("id");

    and to expand it

    if(getcokilval=='expanded') $(getcokival).slideDown();


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •