У меня есть несколько js div и несколько кнопок, но когда я запускаю его и нажимаю div, слайд переключает все div

0

У меня есть несколько js-div и несколько кнопок, но когда я запускаю его и нажимаю div, он сдвигает все div файлы, вот мой код:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").slideToggle();
  });
  });
 $(document).ready(function(){
    $("button#2").click(function(){
    $("div#2").slideToggle();
  });
  });
  $(document).ready(function(){
    $("button#3").click(function(){
    $("div#3").slideToggle();
  });
  });
  $(document).ready(function(){
    $("button#4").click(function(){
    $("div#4").slideToggle();
    });
  });
  $(document).ready(function(){
    $("button#5").click(function(){
    $("div#5").slideToggle();
  });
});
</script>
<link rel="stylesheet" href="style.css">
        <title>homepage</title>
    </head>
    <body>
<h1>Home of the Elements</h1>

<button>Hydrogen</button>
<div style=display:none>
<p>Element name:</p>
<p>Element symbol</p>
<p>Atomic Mass</p>
<p>Atomic number</p>
<p>Discoverer</p>
<p>Date of Discovery</p>
<p>How named</p>
<p>Room Temp State of Matter</p>
<p>Melting Point</p>
<p>Boiling Point</p>
<p>Cool Fact1</p>
<p>Cool Fact2</p>
<p>Cool Fact3</p>
<p>Cool Fact4</p>
<p>Cool Fact5</p>
<p>Use of Element1</p>
<p>Use of Element2</p>
<p>Use of Element3</p>
<p>Use of Element4</p>
</div>
<br>
<button id=2>Sodium</button>
<div id=2 style=display:none>
<p>Element name:</p>
<p>Element symbol</p>
<p>Atomic Mass</p>
<p>Atomic number</p>
<p>Discoverer</p>
<p>Date of Discovery</p>
<p>How named</p>
<p>Room Temp State of Matter</p>
<p>Melting Point</p>
<p>Boiling Point</p>
<p>Cool Fact1</p>
<p>Cool Fact2</p>
<p>Cool Fact3</p>
<p>Cool Fact4</p>
<p>Cool Fact5</p>
<p>Use of Element1</p>
<p>Use of Element2</p>
<p>Use of Element3</p>
<p>Use of Element4</p>
</div>
<br>
<button id=3>Potassium</button>
<div id=3 style=display:none>
<p>Element name:</p>
<p>Element symbol</p>
<p>Atomic Mass</p>
<p>Atomic number</p>
<p>Discoverer</p>
<p>Date of Discovery</p>
<p>How named</p>
<p>Room Temp State of Matter</p>
<p>Melting Point</p>
<p>Boiling Point</p>
<p>Cool Fact1</p>
<p>Cool Fact2</p>
<p>Cool Fact3</p>
<p>Cool Fact4</p>
<p>Cool Fact5</p>
<p>Use of Element1</p>
<p>Use of Element2</p>
<p>Use of Element3</p>
<p>Use of Element4</p>
</div>
<br>
<button id=4>Rubidium</button>
<div id=4 style=display:none>
<p>Element name:</p>
<p>Element symbol</p>
<p>Atomic Mass</p>
<p>Atomic number</p>
<p>Discoverer</p>
<p>Date of Discovery</p>
<p>How named</p>
<p>Room Temp State of Matter</p>
<p>Melting Point</p>
<p>Boiling Point</p>
<p>Cool Fact1</p>
<p>Cool Fact2</p>
<p>Cool Fact3</p>
<p>Cool Fact4</p>
<p>Cool Fact5</p>
<p>Use of Element1</p>
<p>Use of Element2</p>
<p>Use of Element3</p>
<p>Use of Element4</p>
</div>
<br>
<button id=5></button>
<div id=5 style=display:none>
<p>Element name:</p>
<p>Element symbol</p>
<p>Atomic Mass</p>
<p>Atomic number</p>
<p>Discoverer</p>
<p>Date of Discovery</p>
<p>How named</p>
<p>Room Temp State of Matter</p>
<p>Melting Point</p>
<p>Boiling Point</p>
<p>Cool Fact1</p>
<p>Cool Fact2</p>
<p>Cool Fact3</p>
<p>Cool Fact4</p>
<p>Cool Fact5</p>
<p>Use of Element1</p>
<p>Use of Element2</p>
<p>Use of Element3</p>
<p>Use of Element4</p>
</div>

хорошо, я бы очень признателен, если бы я мог помочь с этим

вот остальная часть кода

  • 0
    Подождите. Таким образом, при нажатии кнопки № 2. вы устанавливаете div # 2 и «еще 4 кнопки с разными идентификаторами» для всех переключателей? Он делает именно то, что вы кодировали.
  • 0
    Какая проблема у вас возникла?
Показать ещё 3 комментария
Теги:

1 ответ

1
Лучший ответ
$('button').click(function() {
    $(this).next().slideToggle();
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню