Question

我有我的下拉列表，它正在点击其父锚标签，但现在我想在点击身体时关闭它

我试着用event.stopPropagation（）; 但它不起作用，这是我的代码 -

$(".mydropd > a").click(function() {
  $(this).siblings(".mycustom_dropd").slideToggle();
});
$('body').click(function(event) {
  $(".mycustom_dropd").slideUp();
  event.preventDefault();
  event.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="mydropd">
  <a href="#" class="mydropd_a">menu
          <span class="line1"></span>
          <span class="line2"></span>
          <span class="line3"></span>
        </a>
  <ul class="mycustom_dropd">
    <li>
      <a href="#"><img src="images/vibgyor.png"> VIBGYOR</a>
    </li>
    <li><a href="#">MULTIPLAYER</a></li>
    <li><a href="#">RAPTOP</a></li>
    <li><a href="#">HELP</a></li>
    <li><a href="#">PROFILE</a></li>
  </ul>

Answer 1

在jQuery ready function中换行代码。

<script type="text/javascript">
    $(function() {
        $(".mydropd > a").click(function(){
            $(this).siblings(".mycustom_dropd").slideToggle();
             event.preventDefault();
             event.stopPropagation();
        });
        $('body').click(function(event){
            $(".mycustom_dropd").slideUp();

        });
    });
</script>


<div class="mydropd">
<a href="#" class="mydropd_a">Click Here
    <span class="line1"></span>
    <span class="line2"></span>
    <span class="line3"></span>
 </a>
<ul class="mycustom_dropd">
    <li><a href="#"><img src="images/vibgyor.png"> VIBGYOR</a></li>
    <li><a href="#">MULTIPLAYER</a></li>
    <li><a href="#">RAPTOP</a></li>
    <li><a href="#">HELP</a></li>
    <li><a href="#">PROFILE</a></li>
 </ul>
</div>

需要关闭下拉单击身体点击

1 个答案: