Question

我正在编写一个代码，其中active类通过JS添加到div。

我想做的是，当div有active类时，隐藏另一个div。但是，由于active类是通过JS添加的，因此该代码不起作用：

if($("#section3").hasClass("active")) {
    $(".menu").fadeOut("fast");
}

我想我需要使用on函数：.on()

这样的东西，但它不起作用......有什么想法吗？

$("#section3").on( function() {
    $(this).hasClass('active') {
        $(".menu").fadeOut("fast");
    }
});

编辑：

我担心我无法粘贴代码，因为我使用的是插件。 This is the one that I am using，所以你可以看到那里的功能。

我已将此子弹菜单添加到其中：

<ul id="menu">
    <li data-menuanchor="slide1"><a href="#slide1"><span></span></a></li>
    <li data-menuanchor="slide2"><a href="#slide2"><span></span></a></li>
    <li data-menuanchor="slide3"><a href="#slide3"><span></span></a></li>
    <li data-menuanchor="slide4"><a href="#slide4"><span></span></a></li>
</ul>

每个幻灯片在视口上都有一个active class，所以我想要实现的是当最后一个滑块处于活动状态时，隐藏菜单

Answer 1

＆＃13;

$(document).ready(function(){
$('section').click(function(){

$(this).addClass('active');
if($('section').hasClass('active')){

$('ul#menu').hide();

}
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>check</section>
<ul id="menu">
<li data-menuanchor="slide1"><a href="#slide1"><span></span></a></li>
    <li data-menuanchor="slide2"><a href="#slide2"><span></span></a></li>
    <li data-menuanchor="slide3"><a href="#slide3"><span></span></a></li>
    <li data-menuanchor="slide4"><a href="#slide4"><span></span></a></li>


</ul>

＆＃13;

Answer 2

部分和li都有活动类，所以你可以使用这样的东西或者使用afterSlideLoad事件，如果它是幻灯片显示

$(window).on("scroll",function() {
  if ($('#menu li:last-child').hasClass("active")) {
    ("#menu").fadeOut("fast")
  }
})

或者您可以使用slideIndex检查您是否在最后一张幻灯片上。看到这里＆gt; afterSlideLoad

如果它有一个通过JS添加的类，JS隐藏div

2 个答案: