jQueryは他のdivの要素を表示しません

Question

私は小さなアコーディオンのページをやろうとしていました。 私はWordpressを使用しています。私は外側のコードが重要ではないことを願っています。

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

は「およそメニュー項目」のようなものを生成コードは、クラスを持つdiv要素をクリックしたとき だから.menu-項目は、私は次のdivのthe_content（）がなりたい.about（ページによって異なります）表示されます。

私はこれを試しましたが、動作していません（何も起こっていません） - 私は血まみれの初心者ですので、私はあなたにトグルする方法を助けてくれることを願っています（これは正しい動詞ですか？その中の「メニューコンテンツ」。

問題は、これはループ& 1ページャーです。これは、お互いにもっと下にあることを意味します。私が通常非表示にして表示すると、ページ上のすべてのアイテムが非表示または表示されます。だから私は実際にクリックされたセクションの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

あなたはyou'reが実際に選択し、コンソールログ内の要素を印刷してみてください。このネストされた要素に対して、私は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/