Question

我有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/ 生活在行动中

Answer 1

请检查此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

Answer 2

试试这个：

$(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>

用jquery隐藏和显示内容

2 个答案: