Question

你好的人我创建了两个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>

Answer 1

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

Answer 2

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();
        }
    });
});

Answer 3

您可以使用.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;}

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

3 个答案: