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

您不需要这么多功能，只需要一个简单的click event

就HTML而言，您只需要添加班级showDiv，而不是像dropElement,AnotherDropElement,thirdDropElement

这样的三个单独的班级

如果您点击divs

之外，这也会隐藏target

$('.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

Answer 2

希望这可以帮助您解决问题。

http://jsfiddle.net/18yao91v/254/

$("#img1").on('click', function() {
   $("#div1").fadeIn();
   $("#div2,#div3,#div4").fadeOut();
});
$("#img2").on('click', function() {
   $("#div2").fadeIn();
   $("#div1,#div3,#div4").fadeOut();
});
$("#img3").on('click', function() {
   $("#div3").fadeIn();
   $("#div1,#div2,#div4").fadeOut();
});
$("#img4").on('click', function() {
   $("#div4").fadeIn();
   $("#div1,#div2,#div3").fadeOut();
});

Answer 3

您可以在两个jquery步骤中轻松使用上面提到的相同HTML

这是Jquery代码

$('ul li div:first-child').click(function() {
    $('ul li div:first-child').next('div').hide();
    $(this).next('div').show();
});

的jsfiddle：

link1 - （没有身体事件冒泡）
link2 - （与身体事件鼓泡）

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

3 个答案: