Блог

Главная - Вопросы по программированию - Открыть столбец кнопок при нажатии другой кнопки с помощью HTML/JS и CSS?

Открыть столбец кнопок при нажатии другой кнопки с помощью HTML/JS и CSS?

#javascript #html #css

Вопрос:

У меня есть ряд из 5 кнопок, которые были реализованы в скрипке ниже. Я хочу реализовать код таким образом, чтобы, если я нажму на любую кнопку, например, «Вода», список определенных кнопок появится вертикально.Аналогично, список кнопок должен отображаться для всех 5 кнопок, и одновременно должен быть виден только один список.

 <div id="outer">
        <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;" >Water</button></div>
        
        <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Public</button></div>
        
        <div class="inner"><button class="msgBtn2">Transport</button></div>
        
          <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">House</button></div>
          
          
            <div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Utilities</button></div>
            
    </div>

Вот скрипка : http://jsfiddle.net/fku50o9v/

Как я могу это сделать? Я попытался реализовать это с помощью OnClick, но не смог этого сделать.

Комментарии:

1. Используя редактор, вы действительно можете создать исполняемый пример без необходимости связывать скрипку. Это квадратный значок с надписью <> .

2. Что ты пробовал? какую ошибку вы получили? Добавьте свой JS-код.

3. @Bulent его JS находится в примере скрипки, но очередь редактирования заполнена, поэтому я не могу внести правку =/

4. В скрипке нет кода JS.

5. @Бюлент Я схожу с ума, не обращай внимания.

Ответ №1:

 function popup(id){
if($("#" id).hasClass( "vis" )){
   $("#" id).removeClass( "vis" );
}else{
  $(".dropdown-content").removeClass( "vis" );
  $("#" id).addClass( "vis" );
  }
} 
 #outer
{
    width:100%;
    text-align: center;
}
.inner
{
    display: inline-block;
    padding-right: 20px;
}

    
.msgBtn2{
    cursor: pointer;
    font-size: 1.2rem;
    height: 2.5rem;
    border: none;
    border-radius: 10px;
    color: blue;
    background-color: #ffff;
    outline: none;
    box-shadow: 0 0.3rem  rgba(121,121,121,0.70);
    
}
.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

.dropdown-content {
  min-width: 160px;
  top: 50px;
  margin-left: -40px;
  display: none;
  position: absolute;
  z-index: 1;
  color: red;
}
.dropdown-content button{
  color: red;
  margin: 5px
}

.vis {
  display: block;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
        <div class="inner">
        <div class="dropdown">
  <span><button class="msgBtn2" onclick="popup('water');" >Water</button></span>
  <div id="water" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  </div>
</div></div>
        
        <div class="inner">
        <div class="dropdown">
  <span><button class="msgBtn2" onClick="popup('public');" >Public</button></span>
  <div id="public" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  <button type="submit" class="msgBtn2">Other Button</button> 
  </div></div>
  </div>
        
        <div class="inner">
        <div class="dropdown">
  <span><button type="submit" class="msgBtn2" onClick="popup('transport');" >Transport</button></span>
  <div id="transport" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  <button type="submit" class="msgBtn2">Other Button</button> 
  </div></div></div>
        
        <div class="inner">
          <div class="dropdown">
  <span><button type="submit" class="msgBtn2" onClick="popup('house');" >House</button></span>
  <div id="house" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  <button type="submit" class="msgBtn2">Other Button</button> 
  </div></div></div>
          
        <div class="inner">
            <div class="dropdown">
  <span><button type="submit" class="msgBtn2" onClick="popup('utilities');" >Utilities</button></span>
  <div id="utilities" class="dropdown-content">
  <button type="submit" class="msgBtn2">Button One</button> 
  <button type="submit" class="msgBtn2">Button Two</button> 
  <button type="submit" class="msgBtn2">Button Three</button> 
  <button type="submit" class="msgBtn2">2 Other Button</button> 
  </div></div></div>
    </div>

Попробуй это!

Метки: