我只想要一个打开的面板(某种手风琴菜单)。

Question

我只想要一个打开的面板(某种手风琴菜单)。

到目前为止，我尝试的是(代码中的注释部分)：

//$('#tabs-1').show(100);
//$('#tabs-2').hide();
//$('#tabs-3').hide();

如果选择了选项卡-1，if ($('#tabs-1').is(":visible"))，则隐藏tabs-2和tabs-3，并显示tabs-1，但是如果我触发(在此之后)，如果我单击tabs-2 (例如，单击tabs-2)，它将不会做出反应，因为tabs-1仍然打开，('#tabs-1').is(":visible") (它被捕获在这个块中)并且不能关闭。我知道这不能用我更改为现有代码的方法，但我想不出另一种解决方案.

可以查看代码的外观：

    function CloseTabInfo() {
        $(".BWTabVerticalTitle").on("click", function () {
            //alert("ausgeführt.");
            var contentDiv = $(this).attr("data-forcolapse");
            $(contentDiv).toggle(900);
            if ($('#tabs-1').is(":visible")) {
                //[START] Close other tabs, only one has to be opend 
                //$('#tabs-1').show(100);
                //$('#tabs-2').hide();
                //$('#tabs-3').hide();
                //[END]
                if ($("input:checked").val() == 1) {
                    $('.BWShipmentType').text('@BWHtml.translate("Documents")');
                }
                else if ($("input:checked").val() == 2) {
                    $('.BWShipmentType').text('@BWHtml.translate("Goods")');
                }
                //$('.BWShipmentType').text($("input:checked").val());
                $('.BWTabVerticalPreferences').text($('#shippingDetails_preferences').val());
            } else if ($('#tabs-2').is(':visible')) {
                //[START] Close other tabs, only one has to be opend 


                //$('#tabs-1').hide();
                //$('#tabs-3').hide();
                //$('#tabs-2').show(100);
                //[END]
                $('.BWSenderInfo').text($('#senderAddress_SenderAddress option:selected').text());
            }
            else if ($('#tabs-3').is(':visible')) {
                //[START] Close other tabs, only one has to be opend 

                //$('#tabs-1').hide();
                //$('#tabs-2').hide();
                //$('#tabs-3').show(100);
                //[END]
                $('.BWReceiverInfo').text($('#receiverAddress_matchCode').val());
                if ($('#shippingDetails_payment option:selected').text() != "Choose One") {
                    $('.BWPaymentInfo').text($('#shippingDetails_payment option:selected').text());
                }
                $('.BWCostInfo').text($('#shippingDetails_CostList option:selected').text());

            }
            else {
                //$('.BWShipmentType').text('');
                //$('.BWTabVerticalPreferences').text('');
                //$('.senderAddressInfo').text('');
            }
        });

我对jQuery有点陌生，这让我很难解决这个简单的问题。

Answer 1

您想要做的事情可以很容易地用jQuery UI来完成，这是jQuery的一个官方扩展，它添加了许多UI元素，比如手风琴或Tabs。

• jQuery UI手风琴

下面是如何轻松地实现手风琴：

<script>
  $(function() {
    $( "#accordion" ).accordion();
  });
</script>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Content 1</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Content 2</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Content 3</p>
  </div>
</div>