单击要切换的元素时,切换自身

时间:2015-12-03 17:26:45

标签: jquery toggle

当单击要切换元素的元素时,它会自动切换。为什么?只是不明白,也许写错字或忘记了什么,我不知道。刚刚头疼。 谢谢你的帮助! FIDDLE



$(function() {
  $('#dropdown').hide();
  $('#list li:nth-child(4) a').click(function() {
    $('#dropdown').slideToggle("slow");
  });
});

* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

.fixed-side-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: #333;
}

#list li a {
  position: Relative;
  display: block;
  padding: 10px 0px;
  text-align: Center;
  font-size: 30px;
  color: #fff;
}

#list li a:hover {
  background: #367a8b;
}

#dropdown {
  background: #367a8b;
  display:Block;
}

#dropdown li a {
  padding: 10px 0px;
  margin: 10px 0;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixed-side-menu">
  <ul id="list">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">CONTACT</a></li>
    <li><a href="#">FAQ</a>
      <ul id="dropdown">
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
      </ul>
    </li>
  </ul>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您只需要选择属于特定li元素的直接子元素的锚点(顺便说一句,您应该只选择li:nth-child(4)的直接子元素#list):

$('#list > li:nth-child(4) > a').click(function() {
    $('#dropdown').slideToggle("slow");
});

否则,你也在#dropdown中加入了锚点。

-jsFiddle-