jquery - How to open a dropdown and close another dropdown with JavaScript? - Stack Overflow

admin管理员组

文章数量:1410689

I have these two dropdowns & when the one is open the other doesn't close. I want to use if-else statements but i'm not very familiar with JavaScript code.

$(".dropdown").on( "click", function() {
    $(".v-dropdown").slideToggle();
    return false;
});


$(".dropdown2").on( "click", function() {
    $(".v-dropdown2").slideToggle();
    return false;
});

HTML

<ul>
<li><a  class="dropdown" data-hover="title">title</a>
<ul class="v-dropdown2">
<li><a href="#" data-hover="1">1</a></li>
<li><a href="#" data-hover="2">2</a></li>
<li><a href="#" data-hover="3">3</a></li>
<li><a href="#" data-hover="4">4</a></li>
</ul>

<li>
<a class="dropdown2" data-hover="title">title</a>
<ul class="v-dropdown2">
<li><a href="#" data-hover="1">1</a></li>
<li><a href="#" data-hover="2">2</a></li>
<li><a href="#" data-hover="3">3</a></li>
<li><a href="#" data-hover="4">4</a></li>
</ul>
</ul>

I have these two dropdowns & when the one is open the other doesn't close. I want to use if-else statements but i'm not very familiar with JavaScript code.

$(".dropdown").on( "click", function() {
    $(".v-dropdown").slideToggle();
    return false;
});


$(".dropdown2").on( "click", function() {
    $(".v-dropdown2").slideToggle();
    return false;
});

HTML

<ul>
<li><a  class="dropdown" data-hover="title">title</a>
<ul class="v-dropdown2">
<li><a href="#" data-hover="1">1</a></li>
<li><a href="#" data-hover="2">2</a></li>
<li><a href="#" data-hover="3">3</a></li>
<li><a href="#" data-hover="4">4</a></li>
</ul>

<li>
<a class="dropdown2" data-hover="title">title</a>
<ul class="v-dropdown2">
<li><a href="#" data-hover="1">1</a></li>
<li><a href="#" data-hover="2">2</a></li>
<li><a href="#" data-hover="3">3</a></li>
<li><a href="#" data-hover="4">4</a></li>
</ul>
</ul>

• javascript
• jquery
• drop-down-menu
• dropdown

Share Improve this question Follow edited Feb 15, 2016 at 11:38 Christie asked Feb 15, 2016 at 11:24 ChristieChristie 311 silver badge55 bronze badges 2

• 1 Can you post the HTML elements that you are referring to in your js code? – mikeyq6 Commented Feb 15, 2016 at 11:26
• 3 Even better, setup an example on jsfiddle – Andrea Casaccia Commented Feb 15, 2016 at 11:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here's an idea. Give all drop down's the same class. Hide all drop downs on click, and only slide down the drop down clicked;

$('.dropdown').on('click', function() { // <-- all drop downs should have the class .dropdown
    $('.v-dropdown').slideUp(); // <-- all sections to slide should have the class .v-dropdown
    $(this).find('.v-dropdown').slideDown(); // slide down only this element
});

This assumes your html structure has .v-dropdown nested within .dropdown. If it is not, then adjust the selector to use something like .next() or something else to find the related drop down to the clicked element instead of .find().

UPDATE

Here's a very basic fiddle of the funcitonality. Your HTML was invalid so I've modified it to work.

$(function() {

  $('.dropdown').on('click', function() {
    var slide_el = $(this).next().find('.v-dropdown');

    // don't slide up if clicking on the already visible element
    if (!slide_el.is(':visible')) {
      $('.v-dropdown').slideUp();
    }
    slide_el.slideToggle(); // only slide clicked element
  });

});

li {
  background-color: #333;
  color: #fff;
  padding: 5px 20px;
  text-align: center;
  list-style: none;
  border-bottom: 1px solid #666;
  a {
    color: #fff;
  }
}

.top {
  margin: 0;
  padding: 0;
  width: 50%;
  float: left;
}

.dropdown {
  cursor: pointer;
  display: block;
  &:hover {
    background-color: #444;
  }
}

.v-dropdown {
  display: none;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="top">
  <li class="dropdown" data-hover="title">title</li>
  <li>
    <ul class="v-dropdown">
      <li><a href="#" data-hover="1">1</a></li>
      <li><a href="#" data-hover="2">2</a></li>
      <li><a href="#" data-hover="3">3</a></li>
      <li><a href="#" data-hover="4">4</a></li>
    </ul>
  </li>
</ul>

<ul class="top">
  <li class="dropdown" data-hover="title">title</li>
  <li>
    <ul class="v-dropdown">
      <li><a href="#" data-hover="1">1</a></li>
      <li><a href="#" data-hover="2">2</a></li>
      <li><a href="#" data-hover="3">3</a></li>
      <li><a href="#" data-hover="4">4</a></li>
    </ul>
  </li>
</ul>

You can give them the same class, i.e. dropdown and v-dropdown, and the code would be

$(".dropdown").on( "click", function() {
    var current_dropdown = $(this).next(".v-dropdown");
    $(".v-dropdown").not(current_dropdown).slideUp();
    current_dropdown.slideToggle();
    return false;
});

If you don't want to change the classes you can use Attribute Starts With Selector

Try this

$(".dropdown").on( "click", function() {
    var current_dropdown = $(".v-dropdown");
    $("[class^=v-dropdown]").not(current_dropdown).slideUp()
    current_dropdown.slideToggle();
    return false;
});


$(".dropdown2").on( "click", function() {
    var current_dropdown = $(".v-dropdown2");
    $("[class^=v-dropdown]").not(current_dropdown).slideUp()
    current_dropdown.slideToggle();
    return false;
});

You can just slideToggle() both of the dropdowns on click event.

$(".dropdown").on( "click", function() {
    $(".v-dropdown").slideToggle();
    $(".v-dropdown2").slideToggle();
    return false;
});


$(".dropdown2").on( "click", function() {
    $(".v-dropdown2").slideToggle();
    $(".v-dropdown").slideToggle();
    return false;
});

So when you press one the other one will slideToggle too.

本文标签： jqueryHow to open a dropdown and close another dropdown with JavaScriptStack Overflow