jQuery在显示元素时执行某些操作

Question

我希望在显示元素时执行代码。

$('.test').on('click', function(){
    $('.sub-slider').toggle();
    $('.sub-slider').on('show', function(){
     console.log("hi");
    });
});

Answer 1

试试这个：

var visible = $("#ele"/*select the element*/).is(":visible");
console.log(visible);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ele"></div>

您可以删除div进行测试。

Answer 2

尝试这样。将函数包含在toggle内。并检查元素是display属性是block然后传递你的东西

 $('.test').on('click', function() {
  $('.sub-slider').toggle(function() {
    if ($(this).css('display') == 'block') {
      console.log('showing')
    }
  });
});

示例

 $('.test').on('click', function() {
      $('.sub-slider').toggle(function() {
        if ($(this).css('display') == 'block') {
          console.log('show')
        }
        else{
         console.log('hide')
        }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="test">click</button>
<p class="sub-slider">text</p>