Question

PS：我不确定要在标题中加上什么，所以请阅读。

我有使用div元素创建的表。该表是服务器端动态创建的。在表格内，每一行都有dropdown box，它们都被隐藏了，我想在以下情况下显示这些dropdown box：

表格行悬停在
单击表行内的按钮

，当鼠标离开表格行时，我想隐藏dropdown box。

我知道可以使用on来完成操作，但是就我而言，dropdown box仅在鼠标离开表的父级时隐藏。

这是表格父级的代码段

<div id="table-parent">
  <!--Table will be insert here-->
</div>

这是jquery的代码

$('div#table-parent').on('mouseover','.div-table-row', function(){
    var actionButton = $(this).find('.btn-show-dropdown');
    var tableRow = this;
    $(actionButton).on('click', function () {
        $(tableRow).find('.dropdown-box').css('display', 'block');
    });
}).mouseleave(function () {
    $(this).find('.dropdown-box').css('display', 'none');
});

这是将插入table-parent

中的表格的代码段

<div class="table">
<div class="div-table-row row-item row-item-dropdown">
    <div class="div-table-col col1">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col2">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
    </div>
    <div class="dropdown-box" style="display: none;">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </div>
</div>

<div class="div-table-row row-item row-item-dropdown">
    <div class="div-table-col col1">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col2">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
    </div>
    <div class="dropdown-box" style="display: none;">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </div>
</div>
....
....
....
</div>

Answer 1

在以下js小提琴中尝试以下代码：

$(".btn-show-dropdown").mouseover(function() {
$(this).closest('.div-table-row').find('.dropdown-box').css('display','block')
});
$(".btn-show-dropdown").mouseout(function() {
$(this).closest('.div-table-row').find('.dropdown-box').css('display','none')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="table">
<div class="div-table-row row-item row-item-dropdown">
    <div class="div-table-col col1">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col2">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
    </div>
    <div class="dropdown-box" style="display: none;">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </div>
</div>

<div class="div-table-row row-item row-item-dropdown">
    <div class="div-table-col col1">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col2">
        <p>Some text here</p>
    </div>
    <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
    </div>
    <div class="dropdown-box" style="display: none;">
        <ul>
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
        </ul>
    </div>
</div>

Answer 2

问题出在您的mouseleave()上，您指的是父级本身，而不是div-table-row类的元素。

您的JQuery应该是：

$('div#table-parent').on('mouseover','.div-table-row', function(){
    var actionButton = $(this).find('.btn-show-dropdown');
    var tableRow = this;
    $(actionButton).on('click', function () {
        $(tableRow).find('.dropdown-box').css('display', 'block');
    });

    $(this).on('mouseleave', function(){ //notice that I move your mouseleave inside.
        $(this).find('.dropdown-box').css('display', 'none');
    });

});

Answer 3

您可以将多个事件绑定到一个元素。查看我的代码，也许它可以为您提供帮助。

$('div#table-parent').on('mouseover mouseleave click', '.div-table-row', function(event) {
  if(event.type == "mouseleave"){
    $(this).find('.dropdown-box').hide()
  }
  else{
    $(this).find('.dropdown-box').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-parent">
  <div class="table">
    <div class="div-table-row row-item row-item-dropdown">
      <div class="div-table-col col1">
        <p>Some text here</p>
      </div>
      <div class="div-table-col col2">
        <p>Some text here</p>
      </div>
      <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
      </div>
      <div class="dropdown-box" style="display: none;">
        <ul>
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
        </ul>
      </div>
    </div>

    <div class="div-table-row row-item row-item-dropdown">
      <div class="div-table-col col1">
        <p>Some text here</p>
      </div>
      <div class="div-table-col col2">
        <p>Some text here</p>
      </div>
      <div class="div-table-col col3">
        <a href="#" class="btn-show-dropdown">Click to show dropdown box</a>
      </div>
      <div class="dropdown-box" style="display: none;">
        <ul>
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

如何在动态元素中应用mouseleave？

3 个答案: