Javascript slider 类

Question

我做错了什么但找不到什么？如果有人能帮助我，我将不胜感激。当我在我的网站上检查它时，这段 JavaScript 代码工作得很好，但是一旦我将它托管在网上，它就没有了

$(".slider").click(function(){

    if ($('.sliding_navigation').hasClass('trial')){
        $('.sliding_navigation').removeClass('trial');
        alert('works');

    } 
    else 
    {
        $('.sliding_navigation').addClass('trial');
        alert('even this works');
    }
});

问题是，当我单击 slider 类时，它会删除试用类，但之后它会自动继续执行 else 语句并添加完全没有效果的类我一直在绕圈子，将不胜感激任何帮助； 这是我要定位的 html 代码

<div class="complete_nav">

<header class="slider">MENU</header>

<header class="sliding_navigation trial">
    <nav >

        <ul>
            <a href="#" ><li class="select"><b>HOME</b></li></a>
          <a href="aboutme.html"><li><b>ABOUT ME</b></li></a>
          <a href="from_my_pen.html"><li><b>FROM MY PEN</b></li></a>
          <a href="books.html"><li><b>BOOKS</b></li></a>
          <a href="reviews_and_press.html"><li><b>REVIEWS AND PRESS</b></li></a>
          <a href="contact_me.html"><li><b>CONTACT ME</b></li></a>              
        </ul>

    </nav>
</header>

</div>

试用类已将显示设置为无。

Answer 1

您可以将所有 javascript 替换为:

$(".slider").click(function(){
    $('.sliding_navigation').toggleClass('trial');
});

$.toggleClass() 单独检查元素是否具有特定类，如果有则删除它，如果没有则添加它。
这对我来说非常有用，只需添加:

.trial {
    display:none;
}

请参阅此 fiddle :https://jsfiddle.net/LnpLzykp/
不要忘记将此添加到您的代码中:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

编辑:也许您的代码中有更多这样的代码，在这种情况下，请改用它:

$(".slider").click(function(){
    $(this).parent().find('.sliding_navigation').toggleClass('trial');
});

通过这种方式，您可以告诉 javascript 仅针对 .slider 正下方的 .sliding-navigation 切换类试用。
检查这个 fiddle :https://jsfiddle.net/LnpLzykp/1/
我使用四个菜单来说明新代码。