切換控制 - 如何創建加減按鈕？

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

請查看以下教程輕松切換 jquery 教程您必須使用 css 將 header 更改為 + 或 -

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

創建一個新元素並將其插入“閱讀更多”標題之后：

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");