請幫我讓這個下拉菜單正常工作

-1

好吧，所以我問過類似的問題之前，但我得到的答案是如此複雜，即使經過2個小時的嘗試將其整合到一個laravel網站它didn沒有工作。現在我知道這似乎很長，但實際上並非如此。我只是用幾句話表達自己的問題。請幫我讓這個下拉菜單正常工作

我真的很感激它，如果有人能請幫我解決這個問題（請看小提琴）：http://jsfiddle.net/pyrot/NaE43/，以便它能正常工作（我已經提到了下面的問題）。

目前我使用了jquery的一些可憐的知識，現在如果有人能夠幫助我正常工作，那麼我現在必須共同破解jquery，但仍然非常感謝。

我試圖給它一個很酷的幻燈片下滑過渡時，當有人將鼠標懸停在「查看更多」鏈接上，這些鏈接隨着這些鏈接滑落：「廣告，賣，加入」以及每當有人懸停在這三個鏈接中的任何一個（請將鼠標懸停在小提琴的「廣告」鏈接上），應該會出現另一個下拉框，但是此時右側有幻燈片打開過渡。當我從「查看更多」鏈接移動鼠標時，我也在努力如何使下拉不會消失。我很可惜地在第一個下拉框中做了這個，把它的邊距放在非常接近「查看更多」鏈接的位置，而當我試圖去看它時，第二個下拉框（右邊），它就像一個魔術一樣消失。我老老實實地在這上面花了很多時間，但我卻無法讓它工作。請幫助我某人！

這是我的導航：

<ul id="parent-ul"> 
    <li><a href="#">home</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">brands</a></li> 

    <li><a href="#" class="view-drop">view more</a>   
     <span class="view-drop-content"> 
      <ul> 
       <li><a href="#" class="v-d-link-one">Ads</a></li> 
       <li><a href="#" class="v-d-link-two">sell</a></li> 
       <li><a href="#" class="v-d-link-three">Join</a></li> 
      </ul> 
     </span> 

     <span class="view-drop-content-two"> 
      <ul> 
       <li><a href="#">link 1</a></li> 
       <li><a href="#">link 2</a></li> 
       <li><a href="#">link 3</a></li> 
      </ul> 
     </span> 
     </li> 

     <li><a href="#">LINK 4</a></li> 
     <li><a href="#">LINK 5</a></li> 
</ul>

這是我的代碼：

$(document).ready(function() { 

    $(".view-drop, .view-drop-content").hover(function(){ 
     $('.view-drop-content').show(); 
    }, function(){ 
      $('.view-drop-content').hide(); 
    }) ; 

}); 

$(document).ready(function() { 

    $(".v-d-link-one, .view-drop-content-two").hover(function(){ 
     $('.view-drop-content-two').show(); 
    }, function(){ 
      $('.view-drop-content-two').hide(); 
    }) ; 

});

，這是我的CSS：

#parent-ul li { 
    display: inline !important; 
    list-style-type:none !important; 
    padding-right: 5px 
} 

.view-drop-content { 

    display: none; 
    background-color: #000000; 
    width: auto; 
    height: auto; 
    position: absolute; 
    margin: 15px auto 0px -65px; 
    z-index: 10; 
    float: left; 
    border: 4px #84ca40 solid; 
    border: 2px #84ca40 solid !important; 
    border-radius: 5px; 
    overflow: hidden; 
    padding: 0px !important; 
    text-indent: -30px; 

} 

.view-drop-content-two { 

    display: none; 
    background-color: #000000; 
    width: auto; 
    height: auto; 
    position: absolute; 
    margin: 15px auto 0px 0px; 
    z-index: 10; 
    float: right; 
    border: 4px #84ca40 solid; 
    border: 2px #84ca40 solid !important; 
    border-radius: 5px; 
    overflow: hidden; 
    padding: 0px !important; 
    text-indent: -30px; 

} 

.view-drop-content > ul li a, 
.view-drop-content-two > ul li a { 

    color: #ffffff; 
    display: block; 
    text-align: left; 
    width: 100%; 
    height: auto; 

}

來源

2014-01-10 riley

Instaed嘗試'MouseEnter/MouseLeave/MouseOver'事件。 – ankur140290

我在大約四（4）小時前嘗試過使用這個功能，但在我家門口出現了更多問題。感謝您通過Ankur140290的回覆。 – riley

你應該指定「類似的問題」，以便我們可以檢查它的答案，看看它是否真的是重複的。大聲呼喊並不是真的有幫助。 –

以下是創建CSS刪除一個簡單的教程down menu

TUTORIAL

來源

2014-01-10 05:02:06

Rahul G Nair，謝謝，我已經爲此鏈接添加了書籤，但我真的希望能有一些幫助。現在我的意思並不是要表揚忘恩負義或任何事情。我真的很想在jsfiddle中修復腳本。 – riley

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script> 
$(document).ready(function() { 

$(".view-drop").hover(function(){ 
    $('.view-drop-content').slideDown().delay(800); 

}, function(){ 
     $('.view-drop-content').slideUp().delay(800); 
}) ; 

$(".view-drop-content ul li").hover(function(){ 
    $('.view-drop-content').css("display","inline");    
    $('.view-drop-content-two').slideDown().delay(400); 

}, function(){ 
     $('.view-drop-content-two').slideUp().delay(400); 
}) ; 




}) 

</script> 
<style type="text/css"> 
#parent-ul li { 
    display: inline !important; 
    list-style-type:none !important; 
    padding-right: 5px 
} 

.view-drop-content { 

    display: none; 
    background-color: #000000; 
    width: auto; 
    height: auto; 
    position: absolute; 
    margin: 20px auto 0px -65px; 
    z-index: 10; 
    float: left; 
    border: 4px #84ca40 solid; 
    border: 2px #84ca40 solid !important; 
    border-radius: 5px; 
    overflow: hidden; 
    padding: 0px !important; 
    text-indent: -30px; 

} 

.view-drop-content-two { 

    display: none; 
    background-color: #000000; 
    width: auto; 
    height: auto; 
    position: absolute; 
    margin: 15px auto 0px 0px; 
    z-index: 10; 
    float: right; 
    border: 4px #84ca40 solid; 
    border: 2px #84ca40 solid !important; 
    border-radius: 5px; 
    overflow: hidden; 
    padding: 0px !important; 
    text-indent: -30px; 

} 

.view-drop-content > ul li a, 
.view-drop-content-two > ul li a { 

    color: #ffffff; 
    display: block; 
    text-align: left; 
    width: 100%; 
    height: auto; 

} 
</style> 
</head> 
<body> 
<ul id="parent-ul"> 
    <li><a href="#">home<a></li> 
    <li><a href="#">about<a></li> 
    <li><a href="#">brands<a></li> 

    <li class="view-drop"><a href="#" >view more</a>   
     <span class="view-drop-content"> 
      <ul> 
       <li><a href="#" class="v-d-link">Ads</a></li> 
       <li><a href="#" class="v-d-link">sell</a></li> 
       <li><a href="#" class="v-d-link">Join</a></li> 
      </ul> 
     </span> 

     <span class="view-drop-content-two"> 
      <ul> 
       <li><a href="#">link 1</a></li> 
       <li><a href="#">link 2</a></li> 
       <li><a href="#">link 3</a></li> 
      </ul> 
     </span> 
     </li> 

<li><a href="#">LINK 4<a></li> 
<li><a href="#">LINK 5<a></li> 
</ul> 
</body>

來源

2014-01-10 05:14:55

好的Rakesh Godhala，感謝您的迴應，但是當我這樣做時，它會一直保持動畫而不停止。 – riley

我正在努力。有些時候 –

好的，謝謝。 – riley

試試這個FIDDLE

$(document).ready(function() { 
    $(".view-drop, .view-drop-content").mouseover(function() { 
     $('.view-drop-content').show(); 
    }); 
    $(".view-drop-content-two, .v-d-link-one").mouseover(function() { 
     $('.view-drop-content').show(); 
     $('.view-drop-content-two').show(); 
    }); 
    $(".view-drop-content-two").mouseleave(function() { 
     $('.view-drop-content').hide(); 
     $('.view-drop-content-two').hide(); 
    }); 
    $(".view-drop, .view-drop-content").mouseleave(function() { 
     $('.view-drop-content').hide(); 
     $('.view-drop-content-two').hide(); 
    }); 
});

的微小變化在你的HTML製作<span>標籤：
我加style="margin-left:-2%;"該類view-drop-content-two

來源

2014-01-10 05:31:57 yashhy

感謝您抽出寶貴時間幫我解決問題，但是像我的小提琴一樣的作品。 – riley

是這樣嗎？ @ user3140116它在我的工作很好，我檢查了鉻和墨子 – yashhy

好吧。讓我再次檢查... – riley

我認爲，你可以只在CSS中實現它，你需要改變你的標記和css當然。以下是演示：

HTML：

<ul id="menu"> 
    <li><a href="#">home</a></li> 
    <li><a href="#">about</a></li> 
    <li><a href="#">brands</a></li>   
    <li> 
     <a href="#">VIEW MORE</a>   
     <ul> 
      <li> 
       <a href="#">Ads</a> 
       <ul> 
        <li><a href="#">link 1</a></li> 
        <li><a href="#">link 2</a></li> 
        <li><a href="#">link 3</a></li> 
       </ul> 
      </li> 
      <li><a href="#">sell</a></li> 
      <li><a href="#">Join</a></li> 
     </ul> 
    </li> 
    <li><a href="#">link 4</a></li> 
    <li><a href="#">link 5</a></li> 
</ul>

CSS：

*{margin:0; padding:0} 
#menu > li { 
    float:left; 
    list-style-type:none; 
    padding-right: 5px; 
    position:relative; 
    z-index:10; 
} 

#menu li ul{ 
    display:none; 
    background:#000; 
    border: 1px #84ca40 solid; 
    position:absolute; 
    top:20px; 
    left:0; 
    width:80px; 
} 
#menu li:hover > ul{ 
    display:block; 
} 
#menu li li ul{ 
    padding:0; 
    top:0; 
    left:80px; 
} 
#menu li li{ 
    display:block; 
    padding:10px; 
} 
#menu li li:hover{ 
    background:#333; 
}

的jsfiddle： http://jsfiddle.net/ashishanexpert/NaE43/24/

見，不需要JavaScript或jQuery的。如果你想要一些動畫，那麼你應該使用jQuery。祝你好運！

來源

2014-01-10 05:43:10

我真的很欣賞這個Ashish Kumar，並且會研究它，但我真的很想真的很喜歡用我在描述中給出的小提琴的固定版本獲得一些幫助，儘管我甚至不知道我的方法是遠程的可能被修復。再次感謝。 – riley

我只是你的小提琴而已。我修改了一些標記和CSS，因爲js不是必需的，所以刪除了它。 –

沒問題，但是因爲鏈接和下拉框之間會有一點空白，並且由於動畫CSS對我來說並不理想。 – riley

請幫我讓這個下拉菜單正常工作

回答

相關問題