0

次の単純なものがあるとします<p:panelMenu>。

<p:panelMenu style="width:200px">
    <p:submenu label="Contents">
        <p:menuitem value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
    </p:submenu>

    <p:separator />

    <p:submenu label="Users">
        <p:menuitem value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
    </p:submenu>                
</p:panelMenu>

サブメニューが展開されると、ページが更新された後でも明示的に折りたたまれるまで、展開されたままにする必要があります。

同様に、後でサブメニューが折りたたまれている場合は、ページがリロード/リフレッシュされた後でも、明示的に展開されるまで折りたたまれたままにする必要があります。これは可能ですか？

ちなみに、次のスクリプトは<p:panelMenu>デフォルトで a を展開します ( all <p:submenu>)。

$(document).ready(function(){
    $(".ui-panelmenu-content").css("display","block");
    $(".ui-panelmenu-header").addClass("ui-state-active");
    $(".ui-icon-triangle-1-e").removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
});

また、次のスクリプトは、 の最初のサブ メニュー<p:panelMenu>が折りたたまれている場合に展開します。

var isMenuExpanded = jQuery('div.ui-panelmenu-content.ui-widget-content.ui-helper-hidden').is(':visible');

if(!isMenuExpanded)
{
    jQuery('.ui-panelmenu-panel a').first().click();
}
4

3 に答える 3

1 
<p:panelMenu stateful="false"></p:panelMenu>

stateful属性のデフォルトは ですtrue。折りたたみ/展開状態を手動で制御する場合は、それを設定する必要があります。その後、サブメニュー要素で属性をfalse使用できます。expanded

于 2016-12-01T09:39:13.063 に答える
1

ID とクラスを含むすべての値項目をクリック応答に設定します

<p:panelMenu id="menu" style="width:200px">
    <p:submenu id="submenu" label="Contents" styleClass="submenu">
        <p:menuitem id="menu1" value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem id="menu2" value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
        <p:menuitem id="menu3" value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
    </p:submenu>
</p:panelMenu>

localstorage をグローバル変数 (インデックス) として設定します

$(document).ready(function(){
    localStorage.param=Number(0);
});

localstorage javascript を使用した変数セッション

var param= Number(localStorage.param);

ページを更新するたびに、localstorage 変数セッションを取得してメニューの状態を変更します

$(document).ready(function(){
var e1 = document.getElementById("menu_submenu");
if(Boolean(param)==true){
    e1.style.display="block";
    e1.parentNode.getElementsByTagName("h3")[0].className="ui-widget ui-panelmenu-header ui-state-default ui-state-active ui-corner-top";
    e1.parentNode.getElementsByTagName("h3")[0].getElementsByTagName("span")[0].className="ui-icon ui-icon-triangle-1-s";
}
else{
    e1.style.display="none";
    e1.parentNode.getElementsByTagName("h3")[0].className="ui-widget ui-panelmenu-header ui-state-default ui-corner-all";
    e1.parentNode.getElementsByTagName("h3")[0].getElementsByTagName("span")[0].className="ui-icon ui-icon-triangle-1-e";
}

localstorage 変数セッションを設定するためのクリック イベント

$(document).on("click", ".submenu", function(e) {
var target = e.target || e.srcElement;
while (target && !target.id) {
    target = target.parentNode;
}
if (!(target.id == 'menu1')){
    var n= Number(param)==Number(0)?Number(1):Number(0);
    param=Number(n);
    localStorage.param=Number(n);
   }
});
于 2014-10-28T21:09:04.307 に答える
0

パネル (開いているパネルと閉じているパネル) の現在の状態を保存する方法は、この以前のスタック オーバーフローの質問で既に十分にカバーされています。

于 2013-09-18T03:42:18.223 に答える