2

HTML に 3 つのスライド パネルがあります。問題は、開いたときにパネルが互いに重なり合うことです。1 つのパネル (#panel1 など) が既に開いていて、ユーザーがもう 1 つのパネル (#panel2) をクリックすると、最初のパネル (#panel1) がスライドして表示されるときに、イベントを作成する関数を取得したいと考えています。一度に 1 つのパネルのみを開きます。

誰でもそれで私を助けることができますか??

前もって感謝します。

HTML:

    <ul id="menu">
        <li><img id="icon_1" src="images/image1.png"></li>
        <li><img id="icon_2" src="images/image2.png"></li>
        <li><img id="icon_3" src="images/image3.png" ></li>
    </ul>

    <div id="panel1"></div>
    <div id="panel2"></div>
    <div id="top_panel"></div>

jQuery ( http://web.archive.org/web/20150227082803/http://www.jqeasy.com/jquery-slide-panel-pluginから取得した #panel1 および #panel2 関数):

    $(document).ready(function(){
        $('#panel1').slidePanel({
            triggerName: '#icon_1',
            speed: 'slow'
    });
        $('#panel2').slidePanel({
            triggerName: '#icon_2',
            speed: 'slow'
        });   
    });

    $(document).ready(function(){
        $("#icon_3").click(function(){
            $("#top_panel").slideToggle("slow");
        });
    });
4

1 に答える 1

0

これらの行の何か。パネルと画像の間の関係を提供するために data-* 属性を使用してください。条件に基づいてロジックをフォローアップします。

Javascript

$('#panel1').slidePanel({
    speed: 'slow',
    position: 'static'
});
$('#panel2').slidePanel({
    speed: 'slow',
    position: 'static'
});

$("[id^=icon]").click(function () {
    // Current active panel
    var $currPanel = $('#' + $(this).data('panel'));

    // Slideup all the other panels other than $currPanel
    $('.panel').not($currPanel).slideUp();
    // If $currPanel has no active class only then slide down
    if (!$currPanel.hasClass('current')) {
        $currPanel.slideDown("slow");
    }
    // Add class active to current panel
    $currPanel.addClass('current');
    // Remove class for other panels
    $('.panel').not($currPanel).removeClass('current');
});

HTML

<ul id="menu">
    <li>
        <img id="icon_1" src="images/image1.png" data-panel="panel1">
    </li>
    <li>
        <img id="icon_2" src="images/image2.png" data-panel="panel2">
    </li>
    <li>
        <img id="icon_3" src="images/image3.png" data-panel="top_panel">
    </li>
</ul>
<div id="panel1" class="panel"></div>
<div id="panel2" class="panel"></div>
<div id="top_panel" class="panel"></div>

デモを確認

于 2013-08-08T20:43:52.483 に答える