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-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元素，例如Accordion或Tabs。

jQuery UI Accordion

以下是如何轻松实现手风琴的方法：

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

我想只有一个打开的面板（一种手风琴菜单）

1 个答案: