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

使用引导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; }

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

来源

2014-09-01 John

这是我最常做的，给转属性的按钮
HTML

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

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

来源

2014-09-01 03:33:48 brianlasta

完美！非常感谢，@brianlasta – John 2014-09-01 03:59:06

为防万一别人使用这段代码，我每次点击一个按钮时都会遇到页面跳到顶端的问题。为了解决这个问题，我添加了一行.... e.preventDefault（）; ....到JavaScript代码。 – John 2014-09-02 02:56:47

谢谢@John，我会编辑我的答案。 :) – brianlasta 2014-09-02 04:29:32

设置基础上，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

来源

2014-09-01 03:23:21

此工作过。谢谢@Arun – John 2014-09-01 04:05:31

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

回答

相关问题