在 li 元素中选择 div 并在 li-click 上执行操作

Question

我认为我在选择时遇到了问题。实际上我有一个 div 包含两个相同大小的其他 div（正面和背面）。我想创建一个点击事件，就像拥有一张卡片的两面一样。没有翻转效果，只需要在点击时覆盖/显示。

我的 html 与此相关：

enter code here`enter code here`<ul id="boxes">
    <li></li>
    <li></li>
    <li></li>
    <li class="rotate">
<div class="flip-container">
<div class="front">
<img src="kuh.jpg">
</div>  
<div class="back">
<p>Oohh...behave!"Austin Powers"</p>
</div>
</div>      
</ul>

enter code here$(function() {

这将是 jQuery。添加类“goaway”在 z-index -2 上设置相应的元素，从而显示背后的 div。我试过用 CSS 设置它。

$("#boxes li").on("click", function(){
    if($(this).next(".front").hasClass("goaway")){
        $(this).next(".front").removeClass("goaway");
    }else{
        $(this).next(".front").addClass("goaway");  
    }
}); 

感谢您提供任何有用的链接。我确信这是正确的方向，但不知道为什么它不起作用。

BR

带有fadeToggle、delay 和clearQueue 和stop 的新JS。

$(function() {$("#boxes li").on("click", 
function(){$(this).find(".front,.back").clearQueue().stop().fadeToggle(800)
.delay(10000).fadeToggle(800);});});

当更频繁地点击 li 时，它会按预期中止该功能，但在 10 秒延迟后切换到后面。我认为它会放弃每一步，因此应该显示正面。

Answer 1

带有所需 CSS 的工作演示以显示其正常工作 http://jsfiddle.net/VRu6X/1/

需要少量的 jQuery

$("#boxes li").on("click", function(){
    $(this).find('.front,.back').toggleClass('goaway');
}); 

HTML，需要从上课开始

<ul id="boxes">
    <li class="rotate">
        <div class="flip-container">
            <div class="front">
                FRONT
           </div>  
            <div class="back goaway">
                BACK
            </div>
        </div>      
    </li>
</ul>

编辑

“还有一件事，由于过渡非常粗糙，我一直在寻找一种更顺畅地切换类的选项。我可以在你的解决方案上应用一些淡化吗？”

您可以更流畅地显示和隐藏
设置回不显示

    <div class="flip-container">
        <div class="front">
            FRONT
       </div>  
       <div class="back" style="display:none">
            BACK
       </div>
    </div>

并使用fadeToggle() http://jsfiddle.net/VRu6X/2/
或slideToggle() 或者http://jsfiddle.net/VRu6X/3/

$("#boxes li").on("click", function(){
    $(this).find('.front,.back').fadeToggle(1000);
}); 

或者，您可以翻转卡片http://jsfiddle.net/VRu6X/5/

<ul id="boxes">
    <li class="rotate">
        <div class="flip-container">
            <div class="front">
                <img src="http://www.madore.org/~david/images/cards/english/king-clubs.png" />
           </div>  
           <div class="back" style="display:none;">
                <img src="http://chetart.com/blog/wp-content/uploads/2012/05/playing-card-back.jpg" />
            </div>
        </div> 
    </li>
</ul>

CSS

#boxes li{
    display:block;
}
.flip-container{
    position:relative;
}
.flip-container div{
    z-index:2;
    position:absolute;
    height:200px;
    width:130px;
}

.front img, .back img{
    width:100%;
    height:100%;
}

JS

$("#boxes li").on("click", function(){
    //$(this).find('.front,.back').slideToggle(500);
    var $showing=$(this).find('.front:visible, .back:visible');
    var $notshowing=$(this).find('.front:not(:visible), .back:not(:visible)')
    $showing.animate({height:0, marginTop:100}, 300, function(){
        $(this).hide();
        $notshowing.show().css({height:0, marginTop:100}).animate({height:200, marginTop:0}, 300);
    });
}); 

请注意 jQuery 中的高度和边距是设置的，而不是被查找的，所以如果你更改 CSS，你必须将其更改为，或者以正确的方式进行（让 jQuery 第一次发现高度)

Answer 2

您是否尝试过重置 z-index？

.comehere { z-index: 2; }

$(document).on('click', '.flip-container', function() {
    $(this).child('.front').toggleClass('comehere').toggleClass('goaway');
}