By Kick


2018-12-06 13:56:33 8 Comments

Let's say that I have a code like this and I want this to work like dropdown one by one

something like:

ABCD

ABCD
  1234

ABCD
  1234
    abcd

<ul class="first">
  <li class="first-a"><a href="https://someurl">ABCD</a>
    <ul class="second">
      <li class="second-a"><a href="https://someurl">1234</a>
        <ul class="third">
          <li class="third-a"><a href="https://someurl">abcd</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

I used css something like this

.first li {
  display:inline-block;
  position: relative;
}

.second {
 display:none;
 position: absolute;
}
.second.open {
  display: block;
}

and js like this

$( ".first-a" ).click(function() {
  $(".second").removeClass( "open" );
  $(".second", this).toggleClass( "open" );
});
$(window).click(function() {
 $(".second" ).removeClass( "open" );
});
$(".first-a").click(function(event){
    event.stopPropagation();
});

and nothing of this worked till now

1 comments

@Pete 2018-12-06 14:34:30

You can just bind a click to the li (may want to give it a class so that it doesn't apply to every li in your project) then you can use jquery to remove the open class from every sibling li and then toggle the class of the one that was clicked.

$("li").click(function(e) {
  e.preventDefault();        // prevents the link click firing otherwise you just redirect to the link and no animation will happen
  e.stopPropagation();       // prevents child clicks bubbling up to parent+
  var $thisLi = $(this);     // get the current li that was clicked as a jquery object
  $thisLi.parent().children('li').not($thisLi).removeClass( "open"); // remove class from all sibling lis but not clicked
  $thisLi.toggleClass( "open");                                      // toggle the class on the clicked
});
li {
  position: relative;
}

li>ul {
  display:none;  /* start sub menus hidden */
}

li.open>ul {
  display:block;  /* show sub menu when open class is added to parent li */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first">
  <li class="first-a"><a href="https://someurl">ABCD</a>
    <ul class="second">
      <li class="second-a"><a href="https://someurl">1234</a>
        <ul class="third">
          <li class="third-a"><a href="https://someurl">abcd</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="first-a"><a href="https://someurl">ABCD</a>
    <ul class="second">
      <li class="second-a"><a href="https://someurl">1234</a>
        <ul class="third">
          <li class="third-a"><a href="https://someurl">abcd</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

@Kick 2018-12-06 14:56:13

I am not that good at js so please elaborate, I am having trouble applying this code

@Pete 2018-12-06 14:56:48

how can I elaborate any more - there are comments explaining each line of code

Related Questions

Sponsored Content

92 Answered Questions

[SOLVED] How to horizontally center a <div>?

34 Answered Questions

[SOLVED] How to make div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1188692 View
  • 1755 Score
  • 34 Answer
  • Tags:   html css width

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

40 Answered Questions

[SOLVED] How to disable text selection highlighting?

31 Answered Questions

[SOLVED] Make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1625847 View
  • 1790 Score
  • 31 Answer
  • Tags:   html css css3 height

16 Answered Questions

[SOLVED] How to disable resizable property of textarea?

  • 2011-03-08 16:15:40
  • user549757
  • 1125082 View
  • 2260 Score
  • 16 Answer
  • Tags:   html css

59 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

26 Answered Questions

[SOLVED] Creating a div element in jQuery

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 748271 View
  • 1438 Score
  • 31 Answer
  • Tags:   css html html-table

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

Sponsored Content