Question

我试图做一个小手风琴onepager。我正在使用Wordpress，我希望外码不重要。代码

<?php print_menu_item(get_post_field( 'post_name', get_post() )); ?>

产生类似“关于菜单项”的内容（取决于页面）因此，当使用类.about .menu-item单击div时，我希望显示下一个div的the_content（）。

我尝试了这个，但它没有用（没有发生） - 我是一个血腥的初学者，所以我希望你能帮助我如何切换（？这是正确的动词？）下一个div并显示里面有“.menu-content”。

问题是，这是一个循环＆amp;一个寻呼机。这意味着，彼此之间还有更多。如果我通常隐藏和显示，页面上的每个项目都会隐藏或显示。所以我真的需要在点击的部分中找到div。

      $(".menu-content").hide();

    $(".menu-item").click(function(e) {
        e.preventDefault();
        $(this).next("div.menu-content").show();





    <section class="<?php print_post_name(get_post_field( 'post_name', get_post() )); ?>" id="<?php print_post_name(get_post_field( 'post_name', get_post() )); ?>">
    <div class="<?php print_menu_item(get_post_field( 'post_name', get_post() )); ?>">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <?php the_title(); ?>
                </div>
            </div>
        </div>  
    </div>
    <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="menu-content">
    <?php the_content(); ?>
                    </div>
                </div>
            </div>
        </div>
</section>

Answer 1

$("#elementToHide").prop('hidden', 'hidden') //hides
$("#elementToShow").prop('hidden', false) //shows

Answer 2

您应该尝试在控制台日志中打印元素，实际上是在选择。对于这个嵌套元素，我将使用next（）。find（）。

$(".menu-item").click(function(e) {
  e.preventDefault();
  $(this).next().find(".menu-content").css("display","block" );
});

.two .menu-content{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="menu">
    <div class="menu-item one">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    Click on me
                </div>
            </div>
        </div>
    </div>
    <div class="menu-item two">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="menu-content">
                    and i will show up
                </div>
            </div>
        </div>
    </div>
</div>
</section>

https://jsfiddle.net/2x1r03b9/1/

jQuery隐藏其他div中的show元素

2 个答案: