2017-08-30 22 views
-1

私はたくさんの検索をしていますが、私自身もいくつか検索しています。Jqueryで表示を切り替えてDivsを非表示にする

私はこれを達成したいと思います(この場合はWordpress抜粋が表示されます)。あなたがreadmoreをクリックすると、抜粋が消え、完全な投稿がスムーズに降ります。これまでのところ、これは私のコード私は今、私はエキスを隠し、近くを作るために必要な、同時に開くだけつのポストを持っているhttp://jsfiddle.net/NFTFw/29/からコードを使用加える

<div class="dropdown dropdown-processed"> 
    <a class="dropdown-link trigger" href="#"><i class="fa 
fa-caret-down" aria-hidden="true"></i></a> <a class="close trigger" 
href="#"><i class="fa fa-times" aria-hidden="true"></i></a> 
    <div class="excerpt"> 
    <?php the_excerpt(); ?>  
    </div> 
    <div id="<?php echo the_ID(); ?>" class="dropdown-container" 
    style="display: none;"> 
    <div class="full-content"> 
    <?php the_content(); ?> 
    <?php 

if(have_rows('downloads')): 
     echo '<h4>Weiter Informationen zum Download:</h4>'; 
     echo '<ul class="fa-ul">'; 
     while (have_rows('downloads')) : the_row(); ?> 


    <li><i class="fa-li fa fa-arrow-down"></i><a href="<?php 
    the_sub_field('file'); ?>" title="<?php the_sub_field('title'); ?>"><?php the_sub_field('title'); ?></a></li> 
    <?php 
endwhile; 

    else : 

    // no rows found 

    endif; 

    ?> 
    </ul> 
</div> 

ある

ボタンを使用して、私の限定されたjQuery機能を追加しました。

$(document).ready(function() { 
    $("close").hide(); 
    $('div.dropdown').each(function() { 
    var $dropdown = $(this); 

    $("a.dropdown-link", $dropdown).click(function(e) { 
     e.preventDefault(); 
     $div = $("div.dropdown-container", $dropdown); 
     $div.toggle(); 
     $("div.dropdown-container").not($div).hide(); 
     $("a.dropdown-link").hide(); 
     $(".excerpt").hide(); 
     $(".close").show(); 
     return false; 
    }); 

    }); 

    $('html').click(function() { 
    $("div.dropdown-container").hide(); 
    }); 

}); 
$(document).ready(function() { 
    $(".close", $hide).click(function(e) { 
    e.preventDefault(); 
    $div = $("div.dropdown-container", $hide); 
    $div.toggle(); 
    $("div.dropdown-container").not($div).show(); 
    $("a.dropdown-link").show(); 
    $(".excerpt").show(); 
    $(".close").hide(); 
    return false; 
    }); 
}); 

それだけではなく、 (mehr lesen)ボタンはもう終了しましたが、閉じるボタンとコンテンツはまったくありません。

誰かが問題(または問題)を見つけて、間違ったことを説明することはできますか?アドバンス

おかげ

+0

私はhttps://codepen.io/maxds/pen/jgeoA](https://codepen.io/maxds/pen/jgeoA [あなたの要件については、その有用だと思います) –

+0

jsfiddleと同じように動作するので、2つの投稿を表示しないでください。Wordpressのexcerpt()とcontent()関数を使用する必要があります。 – akira

答えて

0
$(document).ready(function(){ 

$('.dropdown').each(function() { 
var $dropdown = $(this); 
var $div = $dropdown.find(".dropdown-container"); 
var $excerpt = $dropdown.find(".excerpt"); 

$dropdown.find('.dropdown-link').click(function(e) { 
    e.preventDefault(); 
    $(".dropdown-container").not($div).hide(); 
    $(".excerpt").not($excerpt).show(); 
    $div.toggle(); 
    $excerpt.toggle(); 
    $dropdown.find(".dropdown-link .fa").toggleClass("fa-caret-down").toggleClass("fa-times"); 
    return false; 
}); 
}); 

$('html').click(function(){ 
$(".dropdown-container").hide(); 
$(".excerpt").show(); 
$(".dropdown .dropdown-link .fa").removeClass("fa-times").addClass("fa-caret-down"); 
}); 
}); 
関連する問題