用jquery隐藏和显示内容

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

尝试这个：

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