モバイル上のアンカータグブロックプロパティ

Question

タブレットとモバイルメニューを水平にしましたclick。私のli要素をフルスクリーンにしたいので、アンドック要素をブロック要素として表示しましたが、width:100%を使用していませんでした仕事と私はこのフォーラムで尋ねましたが、アンカー要素をdisplay:blockにする必要があると私に言ってくれました。私のスタイルから自分のスタイルを削除しました。それはうまくいきましたが、今はモバイルデバイスやタブレットデバイスにいるときですサブメニューを持つメニューには、メニューをドロップする代わりにページにリダイレクトされています。 私のコードがある：

/****************************************** 
 
      Tablet Menu Style 
 
*******************************************/ 
 
.tablet-menu{ 
 
display:none; 
 
background:#000; 
 
position:fixed; 
 
width:100%; 
 
height:100%; 
 
opacity:0.7; 
 
z-index:1001; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    transition: all 0.8s ease-in-out; 
 
    -webkit-transition-delay: 0.2s; 
 
    -moz-transition-delay: 0.2s; 
 
    transition-delay: 0.2s; 
 
} 
 
.tablet-menu.show{ 
 
display:block; 
 
} 
 
.tablet-menu ul{ 
 
position:relative; 
 
width:100%; 
 
text-align:center; 
 
padding:0; 
 
margin:0; 
 
} 
 
.tablet-menu li{ 
 
color:#FFF; 
 
background:#000; 
 
} 
 
.tablet-menu li a{ 
 
text-transform: uppercase; 
 
font-family: "Roboto Slab", Times, Georgia, serif; 
 
font-weight:bold; 
 
border-radius:2px; 
 
border-bottom:1px solid white; 
 
position:relative; 
 
display:block; 
 
padding-top:4%; 
 
padding-bottom:4%; 
 
} 
 
.tablet-menu ul li ul{ 
 
display:none; 
 
} 
 
.tablet-menu li:hover ul, .tablet-menu li ul li ul { 
 
display:block; 
 
margin-left:20px; 
 
margin-right:20px; 
 
} 
 
.tablet-menu li:last-child{ 
 
border:none; 
 
} 
 
.tablet-menu li > a:after{ 
 
content: "\33"; 
 
font-family: "ElegantIcons"; 
 
} 
 
.tablet-menu li a:only-child:after, .tablet-menu li li a:after{ 
 
content:""; 
 
} 
 
/* 
 
.tablet-menu li .sub-menu a:last-child:after{ 
 
content:"32"; 
 
} 
 
*/ 
 
.tablet-menu li a:hover{ 
 
background:#fff; 
 
color:#000; 
 
}

<div class="tablet-menu"> 
 
    <ul class="tablet-menu-ul"> 
 
      <li> 
 
      <a>test</a> 
 
      </li> 
 
      <li> 
 
      <a></a>                  <ul> 
 
       <li> 
 
        <a>test1</a> 
 
        <ul> 
 
         <li> 
 
        <a></a> 
 
         </li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
       <li> 
 
        <a>test2</a> 
 
       </li> 
 
       <li> 
 
        <a>test3</a> 
 
       <ul> 
 
        <li> 
 
        <a>test4</a> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
       </nav> 
 
      </div>

サブメニューを持っている要素上のユーザーのクリックが、そのサブメニューを表示するようにするとき、私はしたいです。 これ以上の情報が必要な場合は、ここに記入してください。 編集：私はワードプレスで働いています。私はここでメニューコードを再作成したと思います。

Answer 1

これは、単純なCSSの使用では達成できません。これを行うにはJSを使用しなければならず、HTMLのわずかな変更が必要です。

1. それはhas-childクリック表示サブメニューで、子供
2. 使用JSがあり、その逆の場合に挿入。

has-childクリックイベントを処理中にevent.preventDefault()を追加したことを確認してください。

それとも

このような状況を処理するサードパーティ製のプラグインを使用します。 これは私が今まで平和的に持っていて、今まで使っているのが一番です - http://mmenu.frebsite.nl/

乾杯！

Answer 2

私は最終結果としてここにjqueryコードがほしいと思ったものに近いものを作った。

$('.mobile-menu li').click(function(ev) { 
 
    if($(this).children('ul').is(':visible')) 
 
     return true; 
 
    if($(this).children('ul').toggle("slow").length) 
 
     return false; 
 
    ev.stopPropagation(); 
 
});