2

次のアイテムがクリックされた後、要素を開始位置に戻す際に問題が発生しました。

ユーザーが div.box の 2 つの要素遷移にカーソルを合わせると、その要素がクリックされたときに、要素がその場所にとどまる必要があります。これは、同じアイテムをクリックしてオン/オフすると正常に機能します。問題は、次の項目がクリックされたときにスパンが a.blanket 内の中央に留まることです。

コード: http://jsfiddle.net/MhLwH/3/

HTML:

<div class="box">
    <div class="img"></div>
    <a href="" class="blanket">
        <span class="arrow"></span>
    </a>
</div>

<div class="box">
    <div class="img"></div>
    <a href="" class="blanket">
        <span class="arrow"></span>
    </a>
</div>

CSS:

.box {
    width:200px;
    height:200px;
    background:red;
    float:left;
    margin-left:10px;
    margin-top:50px;
    position:relative;
    /*overflow:hidden*/
}
.blanket {
    width:100%;
    height:100%;
    position:absolute;
    top:100%;
    left:0;
    background:blue;
}
.blanket, .arrow {
   -webkit-transition: all 0.3s ease-in; 
}
.arrow {
    display:block;
    width:100px;
    height:100px;
    position:relative;
    background:black;
    top:-300px;
    z-index:9999;
}
.box:hover .blanket {
    top:0;
}
.box:hover .blanket span {
    top:53px;
}
.active {
    top:0;
}
.activeArrow {
    top:53px;
}

JS: 

$('.box').find('a').click(function (e) {
    e.preventDefault();
        var $this = $(this);

        if ($this.is('.active')) {
            $this.removeClass('active');
            $this.find('span').removeClass('activeArrow');

        } else {
            $('a.active').removeClass('active');
            $this.addClass('active');
            $this.find('span').addClass('activeArrow');
        }
});

余談ですが、移行は今のところWebkitのみをターゲットにしていることを知っています

4

3 に答える 3

1

解決策はすでにあなたに与えられていますが、私の短いバージョンをあなたと共有したいと思います.

$('.blanket').on("click", function(event){
    var $this = $(this);
    $this.toggleClass('active').find('span').toggleClass('activeArrow');
    return false;
});

フィドル

于 2013-07-23T18:17:00.540 に答える