öffnen Sie das Menü auf klicken statt zu schweben

Ich kann mein Menü auf Click-Ereignis nicht öffnen. Es öffnet sich beim Maus-Hover-Ereignis. Ich weiß, es ist eine sehr einfache Frage. Ich habe es versucht, aber ich kann es nicht lösen. Ich brauche dies für die Automatisierung mit Selen, da es keine Mouse-Hover-Ereignisse erfasst.öffnen Sie das Menü auf klicken statt zu schweben

Sie können meinen Code auf https://jsfiddle.net/ansari4all/ssyor80k/

<div align="center" class="action_dropdown_container"> 
    <ul class="action_dropdown"> 
     <li> 
      <a href="">Action</a> 
      <ul> 
       <li> 
        <a href="abc.php">Edit</a> 
       </li> 
       <li> 
        <a href="xyz.php">View</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

ul.action_dropdown { 
    font-family: "titilliumtext22l_ltmedium", sans-serif; 
    font-size: 12px !important; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    position: absolute; 
} 
ul.action_dropdown li { 
    display: block; 
    position: relative; 
    float: left; 
} 
ul.action_dropdown li ul { 
    display: none; 
} 
ul.action_dropdown li a { 
    display: block; 
    text-decoration: none; 
    color: #000; 
    background:#fff url(../../images/xadmin/action_dropdown_arrow.png) no-repeat 42px 6px; 
    border: 1px solid #f1f1f1; 
    line-height:19px; 
    height:19px; 
    padding:0px 12px 0px 5px; 
    text-align:left; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
.action_dropdown_container { 
    width:55px; 
    height:21px; 
} 
.alignmiddle { 
    vertical-align:middle !important; 
} 
ul.action_dropdown li a:hover { 
} 
ul.action_dropdown li ul li a { 
    background:#329ac4 !important; 
    color:#fff; 
} 
ul.action_dropdown li:hover ul { 
    display: block; 
    position: absolute; 
    z-index:999; 
    right: 0px; 
    /*top: -75px;*/ 
} 
ul.action_dropdown li:hover li { 
    float: none; 
    font-size: 11px; 
    margin-top:-1px; 
}

Quelle

2016-12-10 Juned Ansari

für diesen Fall, dass Sie js verwenden. – Jai

Ich glaube nicht, dass wir js verwenden müssen, ich bin mir sicher, dass es möglich ist mit css –

Wenn Sie sicher sind, dann versuchen Sie etwas und wenn Sie irgendwo stecken dann sagen Sie das genaue Problem. – Jai

Was Sie brauchen, ist mit Ul li und Kind css spielen. Die ul ist nicht das Kind des Anchor-Tags, also müssen Sie + verwenden, um das nächste Geschwister des Anchor-Tags zu erhalten.

Bitte stell 'das CSS in Ihrem Code

ul.action_dropdown li > a:focus + ul { 
    display: block; 
    position: absolute; 
    z-index:999; 
    right: 0px; 
    /*top: -75px;*/ 
} 
ul.action_dropdown li > a:focus + ul li { 
    float: none; 
    font-size: 11px; 
    margin-top:-1px; 
}

Siehe in action

Quelle

2016-12-10 13:05:55

Großartig! Sieht magisch aus! – Banzay

aber die Verwendung dieser Seite wird aktualisiert –

Check in meine Geige. Es ist nicht erfrischend. Verwenden Sie Javascript :(); anstelle von # in Ihrem Anchor-Tag href link –

-1

Für clickevents sehen Sie jQuery auf Ihrer Seite nutzen könnten. Zum Laden jquery Check google oder so, aber nach dafür, dass Sie jQuery, bevor diese geladen werden Sie so etwas wie tun könnte:

JQuery:

//start on dom ready 
jQuery(document).ready(function(){ 
//hook on the click event of desired element 
jQuery('.dropdown').click(function(){ 
// toggle is-visible class or something.. 
jQuery('.action_dropdown').toggleClass('is-visible'); 
}); 
});

CSS:

.dropdown { display:none } 
.is-visible {display:block}

Quelle

2016-12-10 12:30:52 DGRFDSGN

jQuery wird nicht benötigt. Sie können dies auch mit einfachem Javascript tun. –

Natürlich ist es in vielerlei Hinsicht möglich, dies ist eine Lösung – DGRFDSGN

Ich erwähnte es, weil Sie geschrieben haben: "Sie müssen jQuery verwenden", was nicht wahr ist. Es sollte "Sie könnten" z. –

-1

Dies sollte funktionieren:

<div align="center" class="action_dropdown_container" onClick="myfunction()"></div>

Das einzige, was Sie jetzt tun müssen, ist den Funktionsnamen und Voila ändern!

Quelle

2016-12-10 12:31:15 CheapGamer

öffnen Sie das Menü auf klicken statt zu schweben

Antwort

Verwandte Themen