jQuery .hide（）和.show（）

debugcn 发表于 Dev

帕斯卡·赫尼（Pascal Hurni）

        $(".navItemWetten").click(function(){
            $(".navUnderItemWetten").hide();
        });

     <nav>
        <?php
            //Falls man eingeloggt ist
            if(isset($_SESSION['email'])){
        ?>
            <a href="logout.php" ><button class="logOutBtn" type="button">Log Out</button></a>
            <h1><p>Backend</p></h1><br /> <br />
            <a><li class="navItemWetten" >Wetten</li></a>
            <a><li class="navUnderItemWetten" >Super League</li></a>
        <?php
            } else {
        ?>
            <h1><p>Backend</p></h1>
        <?php
            }
        ?>
    </nav>

我只想要，当我单击该班级时navItemWetten，该班级navUnderItemWetten是隐藏的。我已经包含了ajax

Praveen Kumar Purushothaman

如果我理解正确，那么这不适用于通过AJAX加载的项目。您需要使用委派。详细地说，由ajax调用生成或重新创建的元素将丢失与它们相关的任何事件，除非它们被委托：

$("body").on("click", ".navItemWetten", function(){
    $(".navUnderItemWetten").hide();
});

并删除其中的按钮<a>。另外，请不要嵌套<p>在<hX>标签内。

解决方案

整个布局是错误的。LI只能包含在内部，<ul>并且您不应在<a>标签内放置任何块级元素。
您必须将代码包含在文档准备功能中。
您必须使用.toggle()代替.hide()和.show()。

片段

// You must include the code inside document ready function.
$(function () {
    $(".navItemWetten").click(function(){
        $(".navUnderItemWetten").toggle();
    });
});

<!-- The whole layout is wrong. The LI can be contained only inside <ul> and you should not put any block level elemenets inside <a> tag. -->
<nav>
    <ul>
        <li class="navItemWetten" ><a>Wetten</a></li>
        <li class="navUnderItemWetten" ><a>Super League</a></li>
    </ul>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。