Question

我试图附加一些文字，当点击它时，隐藏它所附加的元素，但仍保持可见状态，然后再次单击它时，会重新显示该元素：

jQuery(document).ready(function( $ ){
    $('<span class="click-me">Click Here For Filter Options</span>').insertBefore('.searchandfilter');

    $( ".click-me" ).click(function() {
        $( ".searchandfilter" ).css( "height", "0px" );
    });
 }
 });

我知道我应该使用切换功能但是我对如何实现它有点迷茫，因为我甚至无法在点击时隐藏元素。

提前致谢！

Answer 1

您的示例中有一个迷路}，这可能是它无法正常工作的原因。

这是一个有效的例子，我已经整理了一下。

codepen

jQuery＆＃39; s toggle在这里很好用。

＆＃13;

$(function() {
    $('<span>Show/Hide Filter Options</span>')
        .insertBefore('.searchandfilter')
        .click(function() {
            $(".searchandfilter").toggle();
        });
});

＆＃13;

<div class="searchandfilter">Some content</div>

＆＃13;

Answer 2

额外}导致破解代码并使用toggle()显示和隐藏工作。

以下是您的代码的固定版本：

jQuery(document).ready(function( $ ){
    $('<span class="click-me">Click Here For Filter Options</span>').insertBefore('.searchandfilter');

    $( ".click-me" ).click(function() {
        // Use toggle instead
        //$( ".searchandfilter" ).css( "height", "0px" );
        $( ".searchandfilter" ).toggle();
    });
 //} /* extra, cause of breaking */
 });

这是另一种方式：

jQuery(document).ready(function( $ ){
    var $clickMe = $('<span/>',{
        class:'click-me',
        text:'Click Here For Filter Options'
    });

    $clickMe.insertBefore('.searchandfilter');

    $( ".click-me" ).click(function() {
        $( ".searchandfilter" ).toggle();
    });

 });

JsFiddle

jquery附加一个可点击的函数

2 个答案: