Question

在下面的代码中如果我点击锚标记（.account）我想显示具体<div class="submenu_quick_full"> <li class="module1">，我该怎么办请帮助我？

<ul class"main">
<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1" onclick="Open_Quick_Full_Popup();">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>


<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1" onclick="Open_Quick_Full_Popup();">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>
</ul>

Answer 1

在Open_Quick_Full_Popup()功能中，传递this。所以它将成为

  <a class="account" id="account_id1" onclick="Open_Quick_Full_Popup(this);">

在你的js中：

function Open_Quick_Full_Popup(element) {
    $(element).next(".submenu_quick_full").toggle();
}

不是用js代码污染HTML，我更喜欢不引人注目的js，如下所示：

$("a.account").on("click", function(event) {
    $(this).next(".submenu_quick_full").toggle();
    // am using toggle here because i assume that you want to show/hide the div on click
   // if you just wan to show use show() instead
});

不要忘记最初在CSS中添加它：

.submenu_quick_full {
  display: none;
}

<强> DEMO

Answer 2

    <ul class"main">
<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1" onclick="Open_Quick_Full_Popup(this.id);">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>


<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id2" onclick="Open_Quick_Full_Popup(this.id);">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>
</ul>

Answer 3

如果在{html元素事件处理程序属性

中将this作为函数参数传递

<a class="account" id="account_id1" onclick="Open_Quick_Full_Popup(this);">

您的函数可以访问该DOM元素。

function Open_Quick_Full_Popup(elementClicked)
{
    //next sibling of clicked element
    elementClicked.nextSibling;
}

Answer 4

如果您使用的是jQuery，则应该绑定事件而不是在元素本身上调用函数。

您的代码应为：

<ul class"main">
<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>


<li class="module1">
<div class="dropdown"> 
  <a class="account" id="account_id1">
  <img  src="" style="margin-top: -3px;margin-left: 143px;width: 15px;"></a>
  <div class="submenu_quick_full">
    <ul class="root">
      <li><a href="#Dashboard" onclick="Quickpopup();">Quick</a></li>
      <li><a href="#Profile">Full</a></li>
    </ul>
  </div>
</div>
</li>
</ul>
<script type="text/javascript">
 $("a.account").click(function(e) {
    $(this).next(".submenu_quick_full").show(); // you can use toggle if want to close as well
    // If not sure about position of div, use `siblings` instead
 });
</script>

如你所说，你想要显示DIV，我假设默认情况下是隐藏的。如果没有，您应该在样式表中编写此CSS：

.submenu_quick_full {
  display: none;
}

另一个建议：ID值应该是唯一的。

如何对单击元素的下一个元素执行操作

4 个答案: