Question

我正在使用的代码是切换按钮以显示下面的div：

<button href="#" class="btn btn-danger" onclick="$('#target').toggle();">
    <b><font size="6">LOAD MORE</font></b>
</button>

一旦点击显示div，我希望它变得不可见 - 我理解它必须重新加载页面。我不确定要添加什么。

Answer 1

http://jsfiddle.net/qp13zn9s/1/

以下是一些示例HTML：

<button id="theButton">ClickMe</button>
<div id="theDiv" style="display:none;"><p>So text</p></div>

这是使用JQuery的JavaScript：

$("#theButton").click(function(){
    $("#theButton").hide();
    $("#theDiv").show();
})

Answer 2

为了清晰起见，请将您的事件处理程序和HTML分开：

<button type="button" class="btn btn-danger mybutton">
    <strong><span style="font-size: 2em">LOAD MORE</span></strong>
</button>

然后是jQuery：

$(function() {
    $('.mybutton').click(function(e) {
        // do stuff
        $('#target').show();
        $(this).hide();
    });
});

备注：

我replaced带有范围（font tag is not supported in HTML5）的字体标记。

href是a代码的属性，您使用的是button，因此请定义代码的类型而不是href。

如果您可以再次显示此按钮，或者可以通过此按钮以外的其他方法显示div，请使用.toggle()。如果它只是单向隐藏在每个页面视图上，那么简单.show()将会执行，因为它无法再次隐藏。

Answer 3

它很容易使用此代码首先为您的按钮添加另一个id或类，因为通过选择btn btn-danger所有btn btn-danger按钮将被隐藏例如，如果你添加id＆＃34; loadmore＆＃34;你的代码将是这样的

    <button href="#" id="loadmore" class="btn btn-danger" onclick="$('#target').toggle();">
        <b><font size="6">LOAD MORE</font></b>
    </button>

<script>
    $('#loadmore').click(function(){

    ////// code to show more

    $('#loadmore').hide(); //// u can use other functions too

    });
    </script>

我建议你使用下面的代码（更清晰）

<style>
    button#loadmore{
        font-size: 60px;
        font-style: bold;
    }
</style>

<script>
    $(document).ready(function(){

        $('#loadmore').click(function(){
            $('#target').toggle();

            $('#loadmore').hide(); //// u can use other functions too

        });

    });
</script>

<button href="#" id="loadmore" class="btn btn-danger"> LOAD MORE </button>

Answer 4

<script type="text/javascript">

$(document).ready(function() {
$("button.exampleClass").click(function() {
$(this).hide();
$("#target").toggle();
});
});

</script>

在使用上面的代码之前，不要忘记调用jquery。

你的HTML

 <button href="#" class="btn btn-danger exampleClass">
 <b><font size="6">LOAD MORE</font></b>
 </button>

Answer 5

使用以下JS fiddel code reference以便您更好地理解＆amp;你可以玩它。

在您的示例中，您还没有为目标按钮指定代码，但在上面的链接示例中，您可以看到。

这是我的代码::

<button href="#" class="btn btn-danger" onclick="$('#target').toggle();">
    <b><font size="6">LOAD MORE</font></b>
</button>

<button id="target">Target</button>

单击切换div后，使jquery按钮不可见

5 个答案: