Javascript 使用jquery隐藏和显示内容

我有两个div，上面有一个按钮。在开始时，您只看到1个div，这将是catalogusOrderBox div。如果我单击按钮：manualButton（将显示在div上方），则它必须显示manualOrderBox div并隐藏CatalogsOrderBox div。但它还需要更改按钮文本（从manual按钮更改为Catalogs按钮）因此，用户可以再次打开CatalogSorderBox div，因此如果单击该按钮，则必须再次显示CatalogSorderBox并隐藏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">

$（文档）.ready（函数（）{
$（'.manualOrderBox'）.hide（）。在（''）之前；
$（'a#toggle manualOrderBox'）。单击（函数（）{
$（'manualOrderBox'）。滑动切换（1000）；
如果（$（'.manualOrderBox'）。是（“：可见”））{
$（'.catalogsorderbox'）.hide（）；
$（'.manualOrderBox'）。可见=假；
}否则{
$（'.manualOrderBox'）。可见=真；
$（'a#toggle manualOrderBox'）。text（'catalogs orderBox'）；
$（'.catalogsorderbox'）.show（）；
}
返回false；
});
});

另见 现场直播

请检查此项

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>

使用更改按钮文本

尝试以下操作：

$（文档）.ready（函数（）{
var newAnchor=$（''）；
var manualBox=$（'.manualOrderBox'）；
var catalogsbox=$（'.catalogsorderbox'）；
slideUp（{duration:0}）.slideDown（{duration:0}）.before（newAnchor）；
catalogsbox.slideUp（{duration:0}）；
newAnchor.text（“目录订购框”）；
newAnchor.click（函数（）{
newAnchor.text（manualBox.is（':visible'）？“manual order box'：“catalogs order box”）；
目录框。停止（真）。滑动切换（400）；
手动箱。停止（正确）。滑动切换（400）；
返回false；
});
});

你好
Catalogs box hello
，因此您只需右键更改按钮文本，也可以右键更改按钮文本。它需要更改按钮文本，打开一个div并隐藏另一个div。让我试着在jsfiddle Allan上上传一些代码：）奇怪，我再也看不到你的答案了@Allan，但你最后的答案是正确的
    $(".changeDiv").click(function()
    {   
        $(".manualOrderBox").hide();
        $(".catalogusOrderBox").hide();
        id = this.id;
        val = $(".changeDiv").val();
        $("."+id).show();
        $(".changeDiv").val(id);
        $(".changeDiv").attr("id", val);
    });