Question

我已经搜索了很多，我也有自己的尝试。

我想在您点击阅读时立即消失并且完整帖子顺利播放，即可实现（在本例中显示Wordpress摘录））

到目前为止，这是我的代码

<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>

添加我使用http://jsfiddle.net/NFTFw/29/中的代码，一次只打开一个帖子，现在我需要隐藏提取并创建一个关闭按钮，所以我用有限的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）按钮，而只是关闭按钮而没有任何内容。

有人可以发现问题（或问题）并解释我做错了什么吗？

先谢谢

Answer 1

$(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");
 });
 });

使用Jquery切换视图并隐藏Div

1 个答案: