股利顯示更改爲隱藏，當我使用一個ID

我很新jQuery的/ javascript和我試圖做一個動畫下拉框，當我點擊到我的導航欄中的按鈕。股利顯示更改爲隱藏，當我使用一個ID

我的代碼工作的jsfiddle http://jsfiddle.net/SQHQ2/2898/

內但當我嘗試到我的網站中實現這一點，並刷新頁面，股利完全消失。我使用了檢查元素，它似乎更改爲「顯示：無」。我試過將div改爲按鈕，但仍無濟於事。我只是想讓按鈕工作！大聲笑

請有人可以告訴我哪裏出錯了嗎？

這是我的html：

<div class="col-md-4 right"> 
    <ul id="user-bar"> 
     <li><div class="btn-burger" id="userlinksbox"><span class="fa fa-bars"></span></div></li> 
     <li><a href="#">My Account</a></li> 
     <li><a href="#">Logout</a></li> 
    </ul> 
</div> 

     <!----- USER LINKS BOX -----> 
     <div class="user-links-box"> 
      <h1>Test</h1> 
     </div>

我的CSS：

.user-links-box { 
    height: 400px; 
    width: 285px; 
    padding: 15px; 
    top:-400px; 
    right:0px; 
    position: absolute; 
    background-color: #111; 
    color: #fff; 
    text-align: center; 
    z-index: 4; 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
}

最後，JS我使用：

$(document).ready(function(){ 
    $("#userlinksbox").toggle(function(){ 
    $('.user-links-box').animate({top:40},500); 
    },function(){ 
    $('.user-links-box').animate({top:-400},500); 
    }); 
});

來源

2015-10-08 preecey_

沒有一個實際的鏈接，我們不能真正幫助，因爲代碼的小提琴作品。必須有其他事情正在進行。 –

你能從開發工具看到添加'display：none'的CSS類嗎？'div'嗎？ – Andrea

增加我的網站鏈接 –

嘗試這些變化：

HTML

<div class="user-links-box" style="display:none"> 
    <h1>Test</h1> 
</div>

CSS

.user-links-box { 
    height: 400px; 
    width: 285px; 
    padding: 15px; 
    top:40px; // CHANGED HERE 
    right:0px; 
    position: absolute; 
    background-color:#111; 
    color:#fff; 
    text-align: center; 
    z-index: 4; 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
}

#userlinksbox { display: inline-block!important; }

個

$(document).ready(function(){ 
    $("#userlinksbox").click(function(){ 
     $('.user-links-box').slideToggle(); 
    }); 
});

來源

2015-10-08 13:53:13 ToskaMan

Thank you！This works perfect。I really appreciate it ！ –

難道真的#userlinksbox？你撥弄告訴我#user-links-box

來源

2015-10-08 11:39:46 AlexG

不好意思啊，我現在已經更新了小提琴。我不再使用連字符。 –

這並不提供答案的問題。要批評或要求作者澄清，請在其帖子下方留言。 – Barett

@Barett的問題顯然是「請能有人告訴我，我要去哪裏錯了嗎？」。如果他只是針對錯誤的元素，這將是答案。 – AlexG

試試這個

$(document).ready(function(){ 
    $("#userlinksbox").toggle(function(){ 
    $('.user-links-box').css({'display':'block'}); 
    $('.user-links-box').animate({top:40},500); 
    },function(){ 
    $('.user-links-box').animate({top:-400},500); 
    }); 
});

來源

2015-10-08 11:45:47 Vilvan

沒有運氣，它仍然會改變顯示爲none –

如何放置.css()功能@ Vilvan的答案.toggle()功能之外？

$(document).ready(function(){ 
    $("#userlinksbox").toggle(function(){ 
     $('.user-links-box').animate({top:40},500); 
    },function(){ 
     $('.user-links-box').animate({top:-400},500); 
    }); 

    $('#userlinksbox').css({'display':'block'}); 
});

來源

2015-10-08 12:29:33 ToskaMan

仍然消失： - /它必須是一個div問題或其他 –

我編輯了選擇器，它是#userlinksbox而不是.user-links-box。。 – ToskaMan

對不起，仍然無法正常工作。您是否檢查了網站鏈接，看看發生了什麼？如果您點擊刷新，您可以看到它正在消失。 –

股利顯示更改爲隱藏，當我使用一個ID

回答

相關問題