Drop-down-Funktion funktioniert nicht mehr, nachdem sie mit dem Z-Index nach vorne platziert wurde

Ich habe ein JavaScript-Reservierungs-Widget für OpenTable auf meiner Homepage hinzugefügt. Das Modul verfügt über 3 Dropdown-Menüs, einen Kalender, Datumsauswahl und eine Zeitauswahl. Die zweiten 2 Dropdown-Menüs reagieren nicht, auch wenn ich den z-Index verwende, um sie nach vorne zu verschieben, um sie sichtbar zu machen.Drop-down-Funktion funktioniert nicht mehr, nachdem sie mit dem Z-Index nach vorne platziert wurde

Ich denke, ich mache etwas falsch mit CSS aber kann nicht scheinen zu lösen. Oder vielleicht gibt es einen Konflikt mit js? Nicht sicher. Irgendwelche Vorschläge? Danke - Die Seite ist hier auf einem Dev-Server, http://aac.myftpupload.com/

screenshot of dropdown issue

Ich bin eigentlich nicht einmal sicher, welcher Code hier oben zu setzen zu teilen ... das Skript es unten von Opentable zur Verfügung gestellt, und es kommt mit einer Tonne von CSS, die vielleicht mit meiner Website in Konflikt steht, aber ich bin mir nicht sicher:

</div><div class="wpb_column vc_column_container vc_col-sm-9"><div class="vc_column-inner wpex-clr"><div class="wpb_wrapper wpex-vc-column-wrapper wpex-clr " style="min-height:40px;"> 
<div class="wpb_raw_code wpb_raw_js"> 
    <div class="wpb_wrapper"> 
     <script src="https://secure.opentable.com/frontdoor/default.aspx?rid=82057&amp;restref=6543&amp;bgcolor=F6F6F3&amp;titlecolor=0F0F0F&amp;subtitlecolor=0F0F0F&amp;btnbgimage=https://secure.opentable.com/frontdoor/img/ot_btn_red.png&amp;otlink=FFFFFF&amp;icon=dark&amp;mode=wide&amp;hover=1" type="text/javascript"></script> 
    </div>

Einige der die CSS für die dropwown ist:

element.style { 
    display: block; 
} 

#OT_timeList, #OT_partyList { 
    width: 108px; 
    max-height: 200px; 
    overflow: auto; 
    border-left: 2px solid #b8b4ac; 
    border-right: 2px solid #b8b4ac; 
    border-bottom: 2px solid #b8b4ac; 
    position: absolute; 
    top: 34px; 
    left: 39px; 
    display: none; 
} 

.entry ul, .entry ol { 
    margin: 0 0 10px 10px; 
} 

.entry ul { 
    list-style: disc; 
} 

.entry ul, .entry ol { 
    margin: 0 0 20px 30px; 
} 

.OT_navList { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    float: left; 
    width: 142px; 
    position: absolute; 
    background-color: #fff; 
    z-index: 200; 
    top: 35px; 
    left: 0; 
}

Quelle

2016-05-17 TitoNYC

Benutzer werden Ihnen wahrscheinlich schneller helfen können, wenn Sie relevante Codebeispiele in Ihrer Frage bereitstellen. – martieva

Danke @martieva, ich habe etwas Code hinzugefügt, aber nicht sicher, es ist der richtige Teil! – TitoNYC

In das div "rev_slider_6_1_wrapper" setze ich position: relative; z-index: -1;. Dadurch konnten die Dropdowns vor dem Bild und Text sichtbar gemacht werden.

So wird die div wie folgt aussehen:

<div id="rev_slider_6_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin: 0px auto; padding: 0px; max-width: 1000px; height: 400px; overflow: visible; position: relative; z-index: -1;">

Ich bin mir nicht sicher, ob dies sich negativ auf alle Ihre onload Effekte beeinflussen, aber wenn nichts anderes sollte es Sie in die richtige Richtung gestartet.

Quelle

2016-05-18 02:28:22 martieva

Danke, ja, das bringt das Dropdown im Voraus, aber was ich nicht herausfinden kann ist, warum diese beiden Dropdowns auf dieser Seite nicht funktionieren. Sie können nur das oberste Element auswählen oder vom obersten Element blättern, der Rest ist irgendwie "tot". Das Skript funktioniert auf einer leeren Seite. – TitoNYC

Da war ein seltsamer Code, den ich vermute, dass meine Vorlage eingefügt wurde, was dazu führte, dass die Dropdowns hinter den Schieberegler fielen und nicht funktionierten. Sobald ich das entfernte, funktionierte es.

css_animation="appear"

Quelle

2016-05-18 23:19:32 TitoNYC

Drop-down-Funktion funktioniert nicht mehr, nachdem sie mit dem Z-Index nach vorne platziert wurde

Antwort

Verwandte Themen