Question

使用bootstrap 3 CSS，字体很棒的CSS和最新的jQuery JS文件。

当点击按钮时，我使用javascript来隐藏/显示另一个div内容之上的div内容。

HTML

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

    <div class="col-sm-4">
        <div class="HScontainer">
        <div class="HSouter">
          <p>BOTTOM CONTENT</p>
            <div class="HSbox">
              <p>TOP CONTENT</p>
            </div>
        </div>
        <a href="#" class="HSshowit btn btn-primary" role="button">Show More <i class="fa fa-caret-square-o-up"></i></a>
    </div>
    </div>

</div></div></div>

CSS

.HScontainer {
  overflow:hidden;
}

.HSouter {
  position:relative;

  width: 300px;
  height: 200px;
  background: #FBCF3C;
  border: 1px solid black;
  overflow:hidden;
}
.HSbox {
  position:absolute;
  bottom:0;
  left:0;
  width: 300px;
  height: 200px;
  margin-bottom: -200px;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all: 0.8s ease;
  transitions: all 0.8s ease;
  background: #19A4DA;
}

.HSbox p {
  margin: 0;
  padding: 5px 0 5px 0;
}

.HSshow {
    margin: 0;
}

.HSshowit { width:300px; }

JS

$(function(){
$('.HSshowit').click(function(e) {
    $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow');
});
});

我希望按钮上的文字可以从

更改

Show More <i class="fa fa-caret-square-o-up"></i>

到

Show Less <i class="fa fa-caret-square-o-down"></i>

以下是示例......

http://codepen.io/john84/pen/fIupa

Answer 1

这就是我通常做的事情，在按钮中给出rev属性
的 HTML

<a href="#" rev="more" class="HSshowit btn btn-primary" role="button"> Show More <i class="fa fa-caret-square-o-up"></i> </a>

<强> JS

$(function(){ $('.HSshowit').click(function(e) { $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow'); var condition = $(this).attr("rev"); if(condition == "more"){ $(this).html("Show Less <i class='fa fa-caret-square-o-down'>"); $(this).attr("rev","less"); } else{ $(this).html("Show More <i class='fa fa-caret-square-o-up'>"); $(this).attr("rev","more"); } e.preventDefault(); //prevent default click action from happening }); });

以下是result

Answer 2

根据HSbox元素的状态设置文本，如

$(function () {
    $('.HSshowit').click(function (e) {
        var $box = $(this).prev('.HSouter').children('.HSbox').toggleClass('HSshow');
        $(this).html($box.hasClass('HSshow') ? 'Show Less <i class="fa fa-caret-square-o-down"></i>' : 'Show More <i class="fa fa-caret-square-o-up"></i>')
    });
});

演示：Fiddle

单击时更改按钮文本（更多/更少）

2 个答案: