jquery .hide() 和 .show()

Question

        $(".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

Answer 1

如果我理解正确，这不适用于通过 AJAX 加载的元素。您需要使用委托(delegate)。详细地说，由 ajax 调用生成或重新创建的元素将丢失任何附加到它们的事件，除非它们是 delegated。 :

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

然后删除 <a> 里面的按钮.也请不要嵌套<p> <hX> 内部标签。

解决方案

1. 整个布局是错误的。 LI 只能包含在 <ul> 中并且你不应该在 <a> 中放置任何 block 级元素标签。
2. 您必须将代码包含在文档就绪函数中。
3. 您必须使用 .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>