使用此选择器的 jquery slideToggle答案

【问题标题】：jquery slideToggle with this selector使用此选择器的 jquery slideToggle
【发布时间】：2016-03-01 15:38:59
【问题描述】：

我对 jquery slideToggle 有疑问，这是我的代码：

$(".dropdownmainmenu").click(function(){
  $(this).children(".showmenu").slideToggle();
  $(this).toggleClass("activemainmenu");
  $(this).find(".showarrowmainmenu").toggleClass("arrowright");
  $(this).find(".showarrowmainmenu").toggleClass("arrowdown");
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="dropdownmainmenu">
  <div class="hedmainmenu">
    <a href="#">
        <i class="fa fa-newspaper-o"></i>
      News
      <span class="showarrowmainmenu arrowright"></span>
    </a>
  </div>
  <ul class="showmenu">
    <li><a href="add_news.php">Add news</a></li>
    <li><a href="news.php">All News</a></li>
  </ul>
</div>

我的问题是当我向下滑动菜单并尝试打开像 添加新闻 这样的链接时它不起作用并且菜单向上滑动。

我该如何解决这个问题？

【问题讨论】：

请添加一个JSFiddle。

标签： javascript html jquery drop-down-menu dropdown

【解决方案1】：

如果理解正确，您只想将EventListener 添加到类.hedmainmenu 的div 元素中：

//change the selector to add eventListener to the the div with class hedmainmenu
$(".dropdownmainmenu > div.hedmainmenu").click(function() {
  //now .showmenu is sibling of div.hedmainmenu so I used .next()
  $(this).next(".showmenu").slideToggle();
  $(this).toggleClass("activemainmenu");
  $(this).find(".showarrowmainmenu").toggleClass("arrowright");
  $(this).find(".showarrowmainmenu").toggleClass("arrowdown");
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdownmainmenu">
  <div class="hedmainmenu">
    <a href="#">
      <i class="fa fa-newspaper-o"></i> News <span class="showarrowmainmenu arrowright"></span>
    </a>
  </div>
  <ul class="showmenu">
    <li><a href="add_news.php">Add news</a>
    </li>
    <li><a href="news.php">All News</a>
    </li>
  </ul>
</div>

【讨论】：