кнопка держит при переключении с jquery

У меня есть следующий код, но когда я нажимаю кнопку меню, все остальные меню itwms исчезают по желанию, но кнопка меню слегка подталкивает направо. также, если я пытаюсь добавить продолжительность к переключению, «над mij» становится двумя строками. Может ли кто-нибудь мне помочь? -Макскнопка держит при переключении с jquery

<!DOCTYPE html> 
<html> 
<head> 
    <title> Homepagina </title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <link href='https://fonts.googleapis.com/css?family=Raleway:200' rel='stylesheet' type='text/css'> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
</head> 
<body> 

    <!-- dit zijun de elementen van de menubalk: --> 
    <div class="menuBar"> 
     <ul> 
      <li> <a href="#" id="button"> Over mij </a> </li> 
      <li> <a href="#" id="button"> Hobbies </a> </li> 
      <li> <a href="#" id="menuButton"> MENU </a> </li> 
      <li> <a href="#" id="button"> Muziek </a> </li> 
      <li> <a href="#" id="button"> Informatica </a> </li> 
     </ul> 
    </div> 

    <!-- dit is de inhoud van de pagina: --> 
    <div class="jumbotron"> 
     <div class="container"> 

      hoi 

     </div> 
    </div> 

    <!-- dit is voor de menubalk acties: --> 
    <script> 
     $(document).ready(function(){ 
      $("#menuButton").click(function(){ 
       $("[id=button]").toggle(); 
      }); 
     }); 
    </script> 

</body> 
</html>

body { 
    background-image: url(background.jpg); 
    margin: 0; /* reset de standard marges van de body -> geen randen links en rechts naast .menuBar div */ 
    text-align: center; 
} 

.menuBar { 
    width: 100%; 
} 

.menuBar { 
    padding-left: 0px; 
} 

.menuBar ul li { 
    display: inline-block; 
    width: auto; 
    padding-right: 50px; 
    padding-left: 50px; 
    line-height: 70px; 
} 

.menuBar ul li a { 
    color: white; 
    width: 75px; 
    text-decoration: none; 
    line-height: 70px; 
    font-family: 'Raleway', sans-serif; 
    font-size: 36px; 
} 

.menuBar a:hover { 
    border-bottom: 1px solid white; 
} 

#menuButton { 
    font-size: 46px; 
    position: relative; 
} 

.jumbotron .container { 
    height: 650px; 
    width: 60%; 
    position: fixed; 
    top: 52%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    border-top: 4.5px double white; 
    border-bottom: 4.5px double white; 
}

источник

2015-10-14 Candy_In_Mah_Van

1) у вас есть дубликат Идентификаторы «кнопки». Идентификаторы должны быть уникальными для правильной работы. 2) Создайте пример этого на jsfiddle.net. Я взял ваш код и, похоже, не создал кнопку. –

@TonyHinkle thats weird, используя google chrome, он отлично работает, но только кнопка подталкивает, но я не могу заставить скрипку работать. –

ОК - да, по какой-либо причине это не работает в jsfiddle, но теперь я получил его в файлах и открыл в Chrome. Вы можете изменить цвет .menuBar CSS на черный, поскольку он установлен на белый и, следовательно, невидим. –

OK - вам нужно изменить id="button" на что-то другое, потому что идентификаторы должны быть уникальными. Если вам просто нужно что-то действовать в качестве селектора, вы можете использовать класс в этом экземпляре.

Вот изменения в HTML:

<li> <a href="#" class="myButton"> Over mij </a> </li> 
<li> <a href="#" class="myButton"> Hobbies </a> </li> 
<li> <a href="#" id="menuButton"> MENU </a> </li> 
<li> <a href="#" class="myButton"> Muziek </a> </li> 
<li> <a href="#" class="myButton"> Informatica </a> </li>

Далее, добавьте тумблер в документ, готовый скрыть пункты меню при загрузке страницы, а также добавить параметр времени анимации:

<script> 
    $(document).ready(function(){ 
     //toggle myButton to hide them after the page loads. 
     // If they are hidden before the page loads, the positions 
     // change a bit when they are toggled and that is what 
     // is causing the main Menu button to move 
     $(".myButton").toggle(300); 

     $("#menuButton").click(function(){ 
      $(".myButton").toggle(300); 
     }); 
    }); 
</script>

Наконец, добавьте правило CSS, чтобы остановить пункты меню с помощью двух слов из упаковки:

.myButton { 
    white-space: nowrap; 
}

источник

2015-10-14 21:18:54

кнопка держит при переключении с jquery

ответ

Смежные вопросы