Question

我的切换控件正在工作，但我想添加一个加号 - 减号按钮：当内容出现时变为“ - ”，当内容被隐藏时，它变为“+”。你能帮忙吗？

 <div class='toggle'>
    <h2>Read More</h2>
    <div class="togglebox">
      <div class="content">
        <h3>   
           <p>
              A new exciting way to broadcast your business to customers     
              A new exciting way to broadcast your business.Lorem ipsum 
           </p>
        </h3>
        <!--Content Here-->
      </div>
    </div>
 </div>

 <script>
   $(document).ready(function(){
       //Hide the tooglebox when page load
       $(".togglebox").hide();
        //slide up and down when click over heading 2
       $("h2").click(function(){
           // slide toggle effect set to slow you can set it to fast too.
           $(this).next(".togglebox").slideToggle("slow");
           return true;
       });
   });
 </script>

Answer 1

我修改了你的脚本。你可以试试这个

<script>
$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).next(".togglebox").css("display");  
if(x=="block")
$(this).text("+ Read More");
else
$(this).text("- Read More");
$(this).next(".togglebox").slideToggle("slow");
return true;
});
});
</script>

Answer 2

请查看以下教程easy toggle jquery tutorial 您必须使用css更改标头+或 -

HTML

    <h2 class="trigger"><a href="#">Toggle Header</a></h2>
<div class="toggle_container">
    <div class="block">
        <h3>Content Header</h3>
        <!--Content-->
    </div>
</div>

CSS

h2.trigger {
    padding: 0 0 0 50px;
    margin: 0 0 5px 0;
    background: url(h2_trigger_a.gif) no-repeat;
    height: 46px;
    line-height: 46px;
    width: 450px;
    font-size: 2em;
    font-weight: normal;
    float: left;
}
h2.trigger a {
    color: #fff;
    text-decoration: none;
    display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
    margin: 0 0 5px;
    padding: 0;
    border-top: 1px solid #d6d6d6;
    background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
    overflow: hidden;
    font-size: 1.2em;
    width: 500px;
    clear: both;
}
.toggle_container .block {
    padding: 20px; /*--Padding of Container--*/
    background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

jquery的

$(document).ready(function(){

    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
        return false; //Prevent the browser jump to the link anchor
    });

});

Answer 3

我做了一个可扩展列表的例子，它可能非常有用：

http://jasalguero.com/ledld/development/web/expandable-list/

Answer 4

创建一个新元素并在“Read More”标题后面插入：

var expand_button = document.createElement("A");
expand_button.attr("href", "#");
$(expand_button).text("+");
$(expand_button).click(function(event){
    event.preventDefault();
    $(".togglebox").slideToggle("slow");
    if ($(".togglebox").is(":visible")) {
        $(this).text("-");
    } else {
        $(this).text("+");
    }
});

$(expand_button).insertAfter("h2");

切换控件 - 如何创建加减按钮？

4 个答案: