0

タイトルが漠然としていて申し訳ありませんが、これをどのように表現すればよいかわかりません。

6品のメニューがあります。各メニュー項目を割り当てて、メニューの上にある特定の位置で、対応する独自の div ブロックを開くようにしたいと考えています。

私はこれを行うことができましたが、それは非常にうまく機能しますが、同じメニュー項目をクリックして閉じる場合にのみ、div が閉じます。

1 つの div を開こうとしてから別のメニュー項目をクリックすると、古い項目が開いたままになり、新しい項目が開きます。

それらをグループとして設定して、新しいメニュー項目をクリックすると、現在開いている div が閉じられるようにすることはできますか?

過去 20 分間、コードを貼り付けようとしましたが、このエディターはすべてをコードとして受け入れるわけではありません。間違いではありません。

ここに置いてきた…

http://jsfiddle.net/AFpYc/

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    $($(this).attr('href')).toggle('fade');
});
4

7 に答える 7

1

問題はトグルから来ています...トグルはオン/オフスイッチです。つまり、閉じたものを開き、開いたものを閉じます。

トグルを変更することをお勧めします.show()....hide()これにより、クリックでdivを開く必要がある場合に、必要なことを簡単に行うことができます.show()。.hide()その後、開く前に他のすべての divを決定できます。私はフィドルの仕事をしました。

http://jsfiddle.net/AFpYc/2/

閉じたいすべてのdivを取得する方法に注意してください。ただし、開くものはすべて開きます。

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    $('#popup_canvas').children('div').not($(this).attr('href')).hide();
    $($(this).attr('href')).show('fade');
});
于 2013-02-27T15:39:38.730 に答える
0

(クラスの追加と削除ではなく) 実際にメニューを表示したり隠したりする場合は、非常にシンプルですが効果的なバージョンを次に示します。「not(thismenu)」を使用して、新しいメニューがクリックされたときに他のメニューのみが非表示になるようにしています。

$(document).ready(function() {

<!--**************************************************************************************-->
<!--*** Bind menubar items
<!--**************************************************************************************-->

  $(".menubaritem").click(function(e){
    var thismenu = $(this).find('.menubaroptions');
    $('.menubaroptions').not(thismenu).slideUp("fast"); // hiding all other menus
    thismenu.slideDown("fast");
    e.stopPropagation();
  });

<!--**************************************************************************************-->
<!--*** Bind menubar menu options (to hide current menu when option is clicked)
<!--**************************************************************************************-->

  $(".menubaroption").click(function(e){
    $(this).closest(".menubaroptions").slideUp("fast");
    e.stopPropagation();
  });

<!--**************************************************************************************-->
<!--*** Bind slideup to all menus on body click
<!--**************************************************************************************-->

  $("body").click(function (e) { // binding onclick to body
    $(".menubaroptions").slideUp("fast"); // hiding all menus
    e.stopPropagation();
  });

});

各メニューバー項目の HTML は次のようになります。

  <td class='menubaritem clickable'>Menu Item<div class=menubararrow></div>
    <div style='position:absolute;right:1px'>
      <div class=menubaroptions>
        include("menu-blah.php");
      </div>
    </div>
  </td>

そして、完成のために、ここにcssがあります

.menubaritem{height:26px;color:white;font-weight:normal;padding:2px 20px 2px 10px;white-space:nowrap;text-align:right;position:relative}
.menubaritem:hover{background-color:#404040;color:yellow}
.menubararrow{position:absolute;display:inline;margin-left:10px;float:right;margin-top:4px;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid ".$primarytextcolour.}
.menubaritem:hover div.menubararrow{border-top: 5px solid white;}

.menubaroptions{border:1px solid white;display:none;position:relative;top:4px;background-color:rgba(0,0,0,0.80);color:white;min-width: 160px;box-shadow: 2px 2px 8px #888888;border-radius:4px;z-index:100}
.menubaroptions td{background-color:transparent;color: white;padding: 4px 10px;border:none;border-top:1px solid transparent;border-bottom:1px solid transparent}
.menubaroptions td.menubaroption:hover{background-color:grey;color:white;opacity:1;border-top:1px solid transparent;border-bottom:1px solid transparent}
.clickable{cursor:hand;cursor:pointer;pointer:hand;}
于 2016-03-30T20:14:36.180 に答える
0

これはより洗練されたバージョンです...アクティブな要素は css クラス active を使用して追跡され、新しい要素がフェードインする前にアクティブな要素がフェードアウトします。

http://jsfiddle.net/TrRD9/

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();

    var $href = $($(this).attr('href')); // get target element

    if($href.is('.active')) // if its already active, ignore it
        return;

    // get any active sibling elements
    var $activeSiblings = $href.siblings('.active');
    if($activeSiblings.length > 0)
    {
        // fade out active siblings first
        $activeSiblings.removeClass('active').fadeOut(function(){
            $href.addClass('active').fadeIn();
        });
    } else {
        //  no siblings are active
        $href.addClass('active').fadeIn();
    }
});
于 2013-02-27T15:45:43.127 に答える
0

たぶん、このようなものですか？

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    $('.divs').fadeOut('slow');
    $($(this).attr('href')+':hidden').fadeIn('slow');    
});

デモンストレーション

于 2013-02-27T15:37:51.673 に答える
0

あなたが試すことができます

$('.divs').hide();
$('.links').click(function(event){
    event.preventDefault();
    $($(this).attr('href')).toggle('fade');
    $($(this).attr('href')).siblings().fadeOut()
});

デモ:フィドル

于 2013-02-27T15:35:10.123 に答える
0

を活用できます.siblings()。この.siblings()メソッドを使用すると、DOM ツリーでこれらの要素の兄弟を検索し、一致する要素から新しい jQuery オブジェクトを構築できます。

CSS

.activeClass
{
    color:RED;
}

JavaScript

$(document).ready(function()
{
    $('.divs').hide();
    $('.links').click(function(event){
        event.preventDefault();
        var targetDiv = $($(this).attr('href'));

        $('.links').removeClass("activeClass");
        if(targetDiv.css("display") == "none")
        {
            $(this).addClass("activeClass");
        }

        targetDiv.siblings().hide(); 
        // hide those elements immediately, you would change to fadeOut if you like
        targetDiv.toggle('fade');
    });

    $(document).click(function(e)
    {
        if($(e.target).hasClass("links") || $("#popup_canvas").find(e.target).length > 0)
        {
            // exclude the links and div that pops
        }
        else
        {
            $('.divs').hide();
            $('.links').removeClass("activeClass");
        }
    });
})

更新され、jsfiddle http://jsfiddle.net/AFpYc/8/でコード例を見つけてください

于 2013-02-27T15:40:16.167 に答える