jQuery的显示（）和隐藏（）

我有一个div：jQuery的显示（）和隐藏（）

<div class="showHide"> 
    //content 
</div>

和一个按钮

<button id="event" class="show" type="button">Show more news</button>

CSS是：

.showHide { 
    display: none; 
}

这里的jQuery：

function show() { 
    $(".show").click(function(){ 
    $(".hideShow").show(500,'linear'); 
    $(".show").replaceWith('<button id="event" class="hide" type="button">Show less news</button>'); 
}); 
} 
function hide() { 
    $(".hide").click(function(){ 
    $(".hideShow").hide(500, 'linear'); 
    $(".hide").replaceWith('<button id="event" class="show" type="button">Show more news</button>'); 
}); 
} 

$(document).ready(function() { 
    show(); 
    hide(); 
});

当我第一次点击脚本显示div并替换按钮，但当我第二次点击隐藏脚本不起作用..任何帮助？

来源

2014-01-12 Christian_g3k0

我会考虑重写了一点：

$('#event').on('click', function() { 
    // Using toggle to switch between hidden/shown 
    $('.showHide').toggle(500); 

    // Replace text on button 
    var buttonText = ($('.showHide').is(":visible") == true) ? "Show less news" : "Show more news"; 
    $('#event').text(buttonText); 
});

基本上我注册按钮点击事件。当它点击与内容切换可见和隐藏的div。之后，按钮上的文字被交换为更适合的文字。

来源

2014-01-12 18:10:53 Streamside

wooow！有用！！非常感谢你..可能我需要学习一些JavaScript！ :) –

我看到一个错误...当内容被隐藏时，按钮的文本不会改变..它仍然是“显示较少的消息”...我替换了按钮文本放置一个if如果控制文本并更改它在case..it工程... –

问题在于，按钮不再存在于您将事件绑定到的地方。所以你可以创建一个新的按钮并添加一个事件处理程序。或改变输入文字，并有1个处理，如：

$(function(){ // Document ready 
    $(".showhidebtn").click(function(){ 
     $(".hideShow").toggle(500, 'linear'); 
     if($(".hideShow").is(":visible")) { 
      $(this).val("Hide element"); // Don't know if you need to use `val()` or `html()`. 
     } else { 
      $(this).val("Show element"); 
     } 
    }); 
});

来源

2014-01-12 18:04:49 Niels

有以下脚本

function show_div(){ 

    $(".showHide").show(500,'linear'); 
    $(".show").replaceWith('<button id="event" class="hide" onclick="hide_div()" type="button">Show less news</button>'); 

} 
function hide_div(){ 

    $(".showHide").hide(500, 'linear'); 
    $(".hide").replaceWith('<button id="event" class="show" onclick="show_div()" type="button">Show more news</button>'); 

}

和下面的HTML

<div class="showHide"> 
    //content adsfasdf 
</div> 
<button id="event" class="show" onclick="show_div()" type="button">Show more news</button>

来源

2014-01-12 18:20:58 sanjeev

100％工作在我的系统上测试 – sanjeev

jQuery的显示（）和隐藏（）

回答

相关问题