Results 1 to 3 of 3

Thread: ddlevelsmenu items selection problem

  1. #1
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question ddlevelsmenu items selection problem

    1) Script Title: ddlevelsmenu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

    3) Describe problem:
    When I create a ddlevelsmenu of three levels, I have to write like this to select only the last level of the menu.
    Code:
    jQuery('#myjquerymenu >ul>li>ul>li>ul>li>a').click(function(){
      ...
    });
    Then, when I create a ddlevelsmenu with two levels, I have to change it into
    Code:
    jQuery('#myjquerymenu >ul>li>ul>li>a').click(function(){
      ...
    });
    Are there some good methods that I can deal with these two situations with one method ?
    PS: I have tried this method but it will cause a problem that items of all levels can be selected.
    Code:
    jQuery('#myjquerymenu li>a').click(function(){
      ...
    });
    Could any one help me about this ? Thanks a lot !

  2. #2
    Join Date
    Aug 2004
    Posts
    9,902
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Assuming you have the following drop down menus associated with your DD Levels menu bar:

    Code:
    <!--Top Drop Down Menu 1 HTML-->
    
    
    <ul id="ddsubmenu1" class="ddsubmenustyle">
    <li><a href="#">Item 1a</a></li>
    <li><a href="#">Item 2a</a></li>
    <li><a href="#">Item Folder 3a</a>
      <ul>
      <li><a href="#">Sub Item 3.1a</a></li>
      <li><a href="#">Sub Item 3.2a</a></li>
      <li><a href="#">Sub Item 3.3a</a></li>
      <li><a href="#">Sub Item 3.4a</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4a</a></li>
    <li><a href="#">Item Folder 5a</a>
      <ul>
      <li><a href="#">Sub Item 5.1a</a></li>
      <li><a href="#">Item Folder 5.2a</a>
        <ul>
        <li><a href="#">Sub Item 5.2.1a</a></li>
        <li><a href="#">Sub Item 5.2.2a</a></li>
        <li><a href="#">Sub Item 5.2.3a</a></li>
        <li><a href="#">Sub Item 5.2.4a</a></li>
        </ul>
      </li>
    	</ul>
    </li>
    <li><a href="#">Item 6a</a></li>
    </ul>
    
    
    <!--Top Drop Down Menu 2 HTML-->
    
    <ul id="ddsubmenu2" class="ddsubmenustyle">
    <li><a href="#">Item 1b</a></li>
    <li><a href="#">Item 2b</a></li>
    <li><a href="#">Item Folder 3b</a>
      <ul>
      <li><a href="#">Sub Item 3.1b</a></li>
      <li><a href="#">Sub Item 3.2b</a></li>
      <li><a href="#">Sub Item 3.3b</a></li>
      <li><a href="#">Sub Item 3.4b</a></li>
      </ul>
    </li>
    <li><a href="#">Item 4b</a></li>
    <li><a href="#">Item Folder 5b</a>
      <ul>
      <li><a href="#">Sub Item 5.1b</a></li>
      <li><a href="#">Item Folder 5.2b</a>
        <ul>
        <li><a href="#">Sub Item 5.2.1b</a></li>
        <li><a href="#">Sub Item 5.2.2b</a></li>
        <li><a href="#">Sub Item 5.2.3b</a></li>
        </ul>
      </li>
    	</ul>
    </li>
    <li><a href="#">Item 6b</a></li>
    </ul>
    
    <!--Top Drop Down Menu 3 HTML-->
    
    <ul id="ddsubmenu3" class="ddsubmenustyle">
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
    <li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
    <li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
    <li><a href="http://tools.dynamicdrive.com/password/">htaccess Password</a></li>
    <li><a href="http://tools.dynamicdrive.com/userban/">htaccess Banning</a></li>
    </ul>
    To use jQuery to monitor any clicks on the above and report the level the clicked item is at, you could do something like:
    Code:
    jQuery(function($){ //on DOM load
    	$('#ddsubmenu1, #ddsubmenu2, #ddsubmenu3').click(function(e){
    		var $target=$(e.target)
    		alert($target.parents('ul').length) //alerts the level the clicked item is at: 1,2,3, etc
    		return false
    	})
    })
    DD Admin

  3. #3
    Join Date
    Nov 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    It seems not working well ...

    Please allow me to make my question more clearly:
    There is only one ddlevelsmenu on the form, because it is created automatically based on the input from previous action using ajax, I am concerning that it may appears differently, such as with different levels.

    e.g One of the situation is like this
    Code:
    <ul id="ddsubmenu1" class="ddsubmenustyle">
      <li><a>Item A</a></li>
      <li><a>Item B</a></li>
      <li><a>Item C</a></li>
    </ul>
    And the another one is like this
    Code:
    <ul id="ddsubmenu1" class="ddsubmenustyle">
      <li><a>Item A</a>
        <ul>
          <li><a>Item A.a</a></li>
          <li><a>Item A.b</a></li>
        </ul>
      </li>
      <li><a>Item B</a>
        <ul>
          <li><a>Item B.a</a></li>
          <li><a>Item B.b</a></li>
        </ul>
      </li>
      <li><a>Item C</a>
        <ul>
          <li><a>Item C.a</a></li>
          <li><a>Item C.b</a></li>
        </ul>
      </li>
    </ul>
    I have managed to use two seperate methods like before to deal with these two situations,
    but I am still wondering if I can use only one method to deal with these two.
    And I only want the last level can be clicked,
    e.g Item A / Item B / Item C in the first one or
    Item A.a(A.b) / Item B.a(B.b) / Item C.a(C.b)

    Thanks a lot !

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
  •