Question

这是我的第一个问题。

我遇到了jQuery switchClass的问题。我有一个div（我将调用div A），当我点击它时，它会更改html文本并打开另一个div（我将调用div B）。当我重新单击div A时，我想关闭div B并重新更改div A上的html文本。我设法做到这一点，但当我再次点击div A不再打开div B. 这是我的代码：

$(document).ready(function(){
    $(".button_menu").click(function(){
        $('.menu_contatti').show();
        $('.button_menu').html("So già cosa ordinare....");
        $(this).switchClass("button_menu","button_menu_close");

    $(".button_menu_close").click(function(){
        $('.menu_contatti').hide();
        $('.button_menu_close').html("Non conosci il menù? Clicca qui");
        $(this).switchClass("button_menu_close","button_menu");
        });
    });
});


<div class="input1 button_menu">html text</div>

<div class="menu_contatti" style="display:none;">....</div>

Answer 1

您想使用.toggle()。见下面的演示

$(document).ready(function() {
    $('.divA').on('click', function() {
        $('.divB').toggle();
        if($('.divB').is(':visible')) {
            $('.divA').html('Close');       
        }
        else {
            $('.divA').html('Open');  
        }
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divA">Open</div>
<div class="divB" style="display:none;">This text show and hide</div>

另外，作为备注，如果您更喜欢使用类而不是.toggle()，则应使用.addClass()和.removeClass()

jQuery UI switchClass，打开/关闭相同的div

1 个答案: