javascript - 单击函数问题。在具有相同功能的两个 div 之间切换

Question

我一直在尝试创建一个单独的函数，可以用来直接调用click元素和show元素，而不是通过直接调用函数让它一次又一次地创建。所以当我点击另一个第二个 div 时我被卡住了，第一个 div 没有被隐藏。所以请帮我解决这个问题。这个我试过了

jQuery(document).ready(function(){
    showNav(".clickElement",".dropElement");    
    showNav(".AnotherElement",".AnotherDropElement");    
    showNav(".thirdElement",".thirdDropElement");    
});

function showNav(clickElement,showElement)
{
    jQuery(showElement).removeClass("dropdownElement");
    jQuery(showElement).hide();
    jQuery(clickElement).each(function(){
        jQuery(this).click(function(e){
            jQuery(this).toggleClass("active");
            jQuery(showElement).toggle();
            jQuery(showElement).toggleClass("dropdownElement");
            e.stopPropagation();
        });
        jQuery(document).on("click",".dropdownElement",function(e){
            e.stopPropagation();
        });
        jQuery(document).click(function(e) {
            if(jQuery(e.target).hasClass(clickElement)||jQuery(e.target).hasClass(showElement))
            {
                console.log(clickElement);
            }
            else
            {   console.log(clickElement);      
                jQuery(clickElement).removeClass("active");         
                jQuery(document).find(".dropdownElement").hide();
                jQuery(document).find(".dropdownElement").removeClass("dropdownElement");
            }
        }); 

    });
}

<ul>
    <li>
        <div class="clickElement">Click Function</div>
        <div class="dropElement" style="display: none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </li>
    <li>
        <div class="AnotherElement">Click Function</div>
        <div class="AnotherDropElement" style="display: none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </li>
    <li>
        <div class="thirdElement">Click Function</div>
        <div class="thirdDropElement" style="display: none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </li>
</ul>

ul li { 
    display: inline-block;
    width: 30%;    
    vertical-align: top;
}

Example Snippet

Answer 1

不需要这么多功能，只需要一个简单的点击事件

就 HTML 而言，您只需添加类 showDiv 而不是三个单独的类，例如 dropElement,AnotherDropElement,thirdDropElement

如果您在 target 之外单击，这也会隐藏 div

$('.showDiv').hide();
$(function(){

    $('ul li').click(function(){
        var thisDiv = $(this).find('.showDiv');
        thisDiv.show();
        $('ul li').find('.showDiv').not(thisDiv).hide();
    });
    $(document).click(function(){
        if(event.target.nodeName == 'HTML'){
          $('ul li').find('.showDiv').hide();
        }
    });
});

查看 Fiddle Link