如何更改悬停操作以单击操作?

时间:2018-03-01 16:02:31

标签: javascript jquery html css

你好的人我创建了两个div,当我盘旋到h3时显示了一些东西。我想只在我点击h3时显示这个。我怎么能这样做?

如何更改悬停点击?当我这样做不起作用。 抱歉我的语言不好。

$(document).ready(function () {
    $('li.requirement').hover(function () {
        $(this).find('span').show();
    }, function () {
        $(this).find('span').hide();
    });
});
#wrap {
    background: #e7e7e7;
    padding: 0px; 
    text-align: center;
    width: 100%;  
}

#left, #right {
     background: #ccc;
     display: inline-block;    
     padding: 20px;   
}


li {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}

h3 {text-align:center;}

h3.praw {float:left;}
h3.lew {float:right;}

.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
    <div id="left"><div class="lef">

<li class="requirement" id="requirement_1">
     <h3 class="lew"><a href="#">SPR</a></h3>
 <span class="fr drag lewy" style="display:none;">1 kontakt</span>
</li>

</div></div>
    <div id="right"><div class="praf">

<li class="requirement" id="requirement_2">
     <h3 class="praw"><a href="#">SPR 2</a></h3>
 <span class="fr drag prawy" style="display:none;">2 kontakt</span>

</li>

</div></div>
</div>

3 个答案:

答案 0 :(得分:0)

嗯,你看到,在你的js代码中,你有“悬停”的地方?那么你在那里输入“点击”......

答案 1 :(得分:0)

jQuery悬停函数可以有2个参数,这是你的情况。第一个用于悬停,第二个用于悬停

因此,如果您希望能够关闭并隐藏点击,我建议使用一些CSS并使用toggleClass。但是,如果你想只保留javascript,你可以这样做:

$(document).ready(function () {
    $('li.requirement').click(function () {
        var $elm = $(this);
        if( $elm.hasClass('showed') ){
            $elm.find('span').removeClass('showed').hide();
        }else{
            $elm.find('span').addClass('showed').show();
        }
    });
});

答案 2 :(得分:0)

您可以使用.on('click', function(){});,然后在此功能中检查它是否已经可见。看看这里

修改
由于您希望只是<h3>可点击,我在下面的代码中进行了调整,现在您需要了解h3父级的可见性,因为现在this的上下文现在是{ {1}}而不再是h3

li
$(document).ready(function () {
    $('.clickableH3').on('click', function () {  
        if ($(this.parentElement).find('span').is(":visible")){
          $(this.parentElement).find('span').hide();
        }else{
          $(this.parentElement).find('span').show();   
        }
    });
});
#wrap {
    background: #e7e7e7;
    padding: 0px; 
    text-align: center;
    width: 100%;  
}

#left, #right {
     background: #ccc;
     display: inline-block;    
     padding: 20px;   
}


li {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

span.lewy {float:right; background:red; padding:20px;}
span.prawy {float:left; background:red; padding:20px;}

h3 {text-align:center;}

h3.praw {float:left;}
h3.lew {float:right;}

.calosc {max-width:500px; margin: 0 auto; border:1px solid red;}