Я хотел бы иметь только одну открытую панель (вид аккордеонного меню)

Question

Я хотел бы иметь только одну открытую панель (вид аккордеонного меню)

0

Я хотел бы иметь только одну открытую панель (вид меню аккордеона).

Я пробовал до сих пор (разделы комментариев внутри кода):

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

Если tabs-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, это затрудняет решение этой простой проблемы.

user254197 12 май 2014, в 18:42

Источник

2

Вы должны также разобраться с html, чтобы нам было легче вам помочь. КЛИКНИТЕ СЮДА
Imran Bughio 12 май 2014, в 15:58

Теги:

jquery

css

show

hide

1 ответ

Ещё вопросы

Вы должны также разобраться с html, чтобы нам было легче вам помочь. КЛИКНИТЕ СЮДА

Frithjof · Accepted Answer · 2014-05-12T15-57-00.000Z

То, что вы пытаетесь сделать, можно легко сделать с помощью jQuery UI, официального расширения для jQuery, которое добавляет множество элементов пользовательского интерфейса, например, Аккордеон или вкладки.

Аккордеон UQuery 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>