Question

我的页面中有一些内容框，我需要在这些内容框下切换一些内容。

我的内容框如下所示：

<div class="package">
    <div class="banner-wrap">
        <figure class="featured-thumbnail">
            <a href="#">
                <img src="img/packages/package1.png" alt=""/>
            </a>
        </figure>
        <div class="event">
            <p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
        </div>

        <div class="more-info">
            <p>----- this is my toggling contents ---- </p>
        </div>
    </div> 
</div>

<div class="package">
    <div class="banner-wrap">
        <figure class="featured-thumbnail">
            <a href="#">
                <img src="img/packages/package1.png" alt=""/>
            </a>
        </figure>
        <div class="event">
            <p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
        </div>

        <div class="more-info">
            <p>----- this is my toggling contents ---- </p>
        </div>
    </div> 
</div>

<div class="package">
    <div class="banner-wrap">
        <figure class="featured-thumbnail">
            <a href="#">
                <img src="img/packages/package1.png" alt=""/>
            </a>
        </figure>
        <div class="event">
            <p class="readmore">read more <i class="fa fa-chevron-circle-down"></i></p>
        </div>

        <div class="more-info">
            <p>----- this is my toggling contents ---- </p>
        </div>
    </div> 
</div>

我需要的是当用户点击.readmore时我要切换.more-info DIV。这是我尝试的方式。但它只在第一个内容框中切换内容。

$(".readmore").click(function() {
    $(".more_info").animate({ opacity: 1.0 },200).slideToggle(500, function() {
        $(".readmore").html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
    });
});

有人可以告诉你如何修改这段代码吗？

Fiddle

Answer 1

检查出来：

$(".readmore").click(function () {
    var $this = $(this);
    $this.parent().siblings(".more-info").slideToggle().promise().done(function () {
        $this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
    });
});

或者只是

$(".readmore").click(function () {
    var $this = $(this);
    $this.parent().siblings(".more-info").slideToggle(function () {
        $this.html($(this).is(':visible') ? "read less <i class='fa fa-chevron-circle-up'></i>" : "read more <i class='fa fa-chevron-circle-down'></i>");
    });
});

<强> Fiddle

Answer 2

＆＃13;

$(".readmore").click(function() {
  var txt = $(this).parent().next(".more-info").is(':visible') ? "Read More" : "hide";
  console.log(txt);
  $(this).text(txt).parent().siblings(".more-info").slideToggle()
});

＆＃13;

.more-info {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="package">
  <div class="banner-wrap">
    <figure class="featured-thumbnail">
      <a href="#">
        <img src="img/packages/package1.png" alt="" />
      </a>

    </figure>
    <div class="event">
      <p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>

      </p>
    </div>
    <div class="more-info">
      <p>----- this is my toggling contents ----</p>
    </div>
  </div>
</div>
<div class="package">
  <div class="banner-wrap">
    <figure class="featured-thumbnail">
      <a href="#">
        <img src="img/packages/package1.png" alt="" />
      </a>

    </figure>
    <div class="event">
      <p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>

      </p>
    </div>
    <div class="more-info">
      <p>----- this is my toggling contents ----</p>
    </div>
  </div>
</div>
<div class="package">
  <div class="banner-wrap">
    <figure class="featured-thumbnail">
      <a href="#">
        <img src="img/packages/package1.png" alt="" />
      </a>

    </figure>
    <div class="event">
      <p class="readmore">Read More<i class="fa fa-chevron-circle-down"></i>

      </p>
    </div>
    <div class="more-info">
      <p>----- this is my toggling contents ----</p>
    </div>
  </div>
</div>

＆＃13;

如何在许多内容框中使用jquery slidetoggle？

2 个答案: