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

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

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

编辑 因为你想成为<h3>可点击的，我在下面的代码中做了一个调整，现在你需要cehck h3父级的可见性，因为现在this的上下文现在是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;}

<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 clickableH3"><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 clickableH3"><a href="#">SPR 2</a></h3>
 <span class="fr drag prawy" style="display:none;">2 kontakt</span>

</li>

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

Answer 2

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

Answer 3

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