Question

I m 采用jquery toggle script。我真的希望有一个加(+)的标志,在角逐点开始的时候,在标题中显示,如果是,则显示(-)的符号。

我之所以这样说,不仅仅是使用以下文字,是因为当另一个角点被点击时,目前使用的手稿Im自动接近打开的角,而这正是我真正喜欢的一个特征:

$( #toggle-view li ).click(function () {

    var text = $(this).children( p );

    if (text.is( :hidden )) {
        text.slideDown( 200 );
        $(this).children( span ).html( - );     
    } else {
        text.slideUp( 200 );
        $(this).children( span ).html( + );     
    }   
});
});

我使用的是:

$(document).ready(function(){
$(".parents-toggle > div").click(function () {
$(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
$(this).siblings(".iteminfo-toggle").slideToggle();
});
});

页: 1

<div class="parents-toggle">
<div class="itemheading2_toggle">Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>

没有人会想如何把加/红外标志结合到我使用的目前文字中?

http://www.queness.com/resources/html/toggle/index.html

Answer 1

这里我是怎样做的:

var parent = $( #toggle-view ), // storing main ul for use below
    delay = 200; // storing delay for easier configuration

// bind the click to all headers
$( li h3 , parent).click(function() {

    // get the li that this header belongs to
    var li = $(this).closest( li );

    // check to see if this li is not already being displayed
    if (!$( p , li).is( :visible ))
    {
        // loop on all the li elements
        $( li , parent).each(function() {

            // slide up the element and set it s marker to  +  
            $( p , $(this)).slideUp(delay);
            $( span , $(this)).text( + );
        });

        // display the current li with a  -  marker
        $( p , li).slideDown(delay);
        $( span , li).text( - );
    }
});

Check out http://jsfiddle.net/v9Evw/ to see it in action.

在点击上躲藏,如果它目前看得见的话,在点击方法上添加一个其他内容:

    else {
        $( p , li).slideUp(delay);
        $( span , li).text( + );  
    }

http://jsfiddle.net/v9Evw/1/“rel=“nofollow”) http://jsfiddle.net/v9 Evw/1/,以了解最新情况。

Answer 2

How about this?

html:添加一个编号的序号

<div class="parents-toggle">
    <div class="itemheading2_toggle"><span class="symbol">-</span>Heading</div>
<div class="iteminfo-toggle hidden">
text goes here
</div>

js: toggle +/- 文号

$(".parents-toggle > div").click(function () {
    $(".parents-toggle > div.iteminfo-toggle").not($(this).siblings()).slideUp();
    $(this).siblings(".iteminfo-toggle").slideToggle();

    // toggle open/close symbol
    if($( .itemheading2_toggle span ).text() ==  - ){
        $( .itemheading2_toggle span ).text( + );   
    } else {
        $( .itemheading2_toggle span ).text( - );
    }
});

Demo:。

Answer 3

If you used fontawesome or any other web icons, you could take advantage of jQuery s hasClass and add/remove class functions. I prefer this because the code looks cleaner.

I prefer carets instead of plus-minus. You can use fa-plus fa-minus instead

<script>
$( .reveal1 ).click(function(){
    $( .optional-field1 ).toggle(200);
    
    var child = $(this).children();
    if(child.hasClass( fa-caret-down ))
        child.removeClass( fa-caret-down ).addClass( fa-caret-up );
    else
        child.removeClass( fa-caret-up ).addClass( fa-caret-down );

    return false;
});
</script>

<link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="reveal1" href="#">Toggle Expand <i class="fa fa-caret-down"></i></a>

<p class="optional-field1" style="display: none;">
  Lorem Ipsum is simply dummy text
</p

友情链接