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加载的项。你需要使用授权。要详细说明，由ajax调用生成或重新创建的元素将失去附加到它们的任何事件，除非它们是委托。

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

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

溶液

1. 整个布局都错了。李灿只包含在<ul>中，您不应该在<a>标记中放置任何块级的元素。
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> 

​