用jquery隐藏和显示内容

时间:2015-08-07 07:53:42

标签: javascript jquery html css

我有2个div,上面有一个按钮。在开始时你只看到1个div,这将是thecatalogusOrderBox div。如果我单击按钮:manualButton(将显示在div上方)然后它必须显示manualOrderBox div并隐藏catalogusOrderBox div。但它还需要更改按钮文本(从手动按钮到catalogus按钮),以便用户可以再次打开catalogusOrderBox div,因此如果您再单击该按钮,它必须再次显示catalogusOrdersBox并隐藏manualOrderBox。

现在我有了这个并且它不起作用:

<script type="text/javascript">
$(document).ready(function(){   
    $('.manualOrderBox').hide().before('<a href="#" id="toggle-manualOrderBox" class="manualButton">manual order box</a>');
    $('a#toggle-manualOrderBox').click(function() {

        $('.manualOrderBox').slideToggle(1000);

        if($('.manualOrderBox').is(":visible")){
            $('.catalogusOrderBox').hide();
            $('.manualOrderBox').visible = false;
        }else{
        $('.manualOrderBox').visible = true;
        $('a#toggle-manualOrderBox').text('catalogus orderBox');
        $('.catalogusOrderBox').show();
        }
        return false;
    });

});
</script>

<div class="manualOrderBox">

另见https://jsfiddle.net/Lbot8a8b/ 生活在行动中

2 个答案:

答案 0 :(得分:2)

请检查此Updated Demo

HTML代码:

<button class="changeDiv" id="catalogusOrderBox" value="manualOrderBox">Change Div</button> 
<div class="manualOrderBox">
        manualbox hello
</div>
    <div class="catalogusOrderBox" style="display:none">
       catalogus box hello
</div>

JQuery代码:

    $(".changeDiv").click(function()
    {   
        $(".manualOrderBox").hide();
        $(".catalogusOrderBox").hide();
        id = this.id;
        val = $(".changeDiv").val();
        $("."+id).show();
        $(".changeDiv").val(id);
        $(".changeDiv").attr("id", val);
    });

更改按钮文字Demo

答案 1 :(得分:1)

试试这个:

$(document).ready(function () {
    var newAnchor = $('<a href="#" id="toggle-manualOrderBox" class="manualButton">manual order box</a>');
    var manualBox = $('.manualOrderBox');
    var catalogusBox = $('.catalogusOrderBox');
    manualBox.slideUp({ duration: 0 }).slideDown({ duration: 0 }).before(newAnchor);
    catalogusBox.slideUp({ duration: 0 });
    newAnchor.text('catalogus order box');
    newAnchor.click(function () {
        newAnchor.text(manualBox.is(':visible') ? 'manual order box' : 'catalogus order box');
        catalogusBox.stop(true).slideToggle(400);
        manualBox.stop(true).slideToggle(400);
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="manualOrderBox">manualbox hello</div>
<div class="catalogusOrderBox">catalogus box hello</div>