Опции не отображаются при нажатии на него

Question

Я делаю кнопку опции (точки дерева справа). Когда вы нажимаете на нее, параметры должны быть показаны. Нажмите еще раз, и параметры скрываются. Ниже мой код, но он не работает. Вы можете посмотреть на это?

$("body").ready(function() { 
 
    $(document).on("click", ".options-knop", function() { 
 

 
     if (this.nextSibling.style.display == "none"){ 
 
      this.nextSibling.style.display = 'block !important'; 
 
     } else { 
 
      this.nextSibling.style.display = 'none'; 
 
     } 
 
    }); 
 
});

.img-wrapper { 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    border-radius: 100%; 
 
    float: left; 
 
    margin: 5px; 
 
} 
 

 
.img-container { 
 
    height: 100px; 
 
} 
 

 
.artist { 
 
    transition: background-color 0.5s, color 0.5s; 
 
    cursor: pointer; 
 
} 
 

 
.artist-outer { 
 
    margin: 5px 0; 
 
    padding: 10px 5px; 
 
} 
 

 
.artist .naam { 
 
    width: 190px; 
 
} 
 

 
.options-knop { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 325px; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    font-weight: bold; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    color: black !important; 
 
    transition: background-color 0.5s, color 0.5s; 
 
} 
 

 
.artist-outer:nth-child(6n+4), 
 
.artist-outer:nth-child(6n+5), 
 
.artist-outer:nth-child(6n+6) { 
 
    background-color: #eeeeee; 
 
} 
 

 
.artist:nth-child(6n+4) .options-knop, 
 
.artist:nth-child(6n+5) .options-knop, 
 
.artist:nth-child(6n+6) .options-knop { 
 
    background-color: white; 
 
} 
 
.artist:nth-child(6n+1) .options-knop, 
 
.artist:nth-child(6n+2) .options-knop, 
 
.artist:nth-child(6n+3) .options-knop { 
 
    background-color: #eeeeee; 
 
} 
 

 
.options-knop:hover{ 
 
    background-color: #a3a3a3 !important; 
 
    color: white !important; 
 
} 
 

 
.artist-outer:hover{ 
 
    background-color: #545454 !important; 
 
    color: white !important; 
 
} 
 

 
.options-list { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 50px; 
 
    left: 260px; 
 
} 
 

 
.options-list ul { 
 
    padding: 0; 
 
} 
 

 
.naam { 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.list-group { 
 
    padding-left: 0; 
 
    margin-bottom: 20px 
 
} 
 

 
.list-group-item { 
 
    position: relative; 
 
    display: block; 
 
    padding: 10px 15px; 
 
    margin-bottom: -1px; 
 
    background-color: #fff; 
 
    border: 1px solid #ddd 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div class='clearfix col-md-4 artist-outer' id='656556255'> 
 
    <div class='artist'> 
 
     <div class='artist-info'> 
 
      <div class='img-wrapper'> 
 
       <img style="width:100px" src='http://i.stack.imgur.com/kYnSM.gif'/> 
 
      </div> 
 
      <p class='naam'><b>Random naam</b></p> 
 
      <p>Volgers op Spotify: XXX</p> 
 
     </div> 
 
     <div class='options-knop'>...</div> 
 
     <div class='options-list list-group' style='display: none;'> 
 
      <a class='list-group-item'>Toon albums</a> 
 
      <a class='list-group-item'>Profiel</a> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Поскольку вы используете JQuery вы можете использовать функцию css():

if ($(this).next().css('display') == "none") 
    $(this).next().show(); 
else 
    $(this).next().hide(); 

Или просто использовать toggle() для переключения отображения вашего DIV show/hide без использования состояние:

$(this).next().toggle(); 

Надеюсь, что это поможет.

Answer 2

Вы можете использовать jQuery.toggle

$(document).ready(function() { 
    $(document).on("click", ".options-knop", function() { 
     $(this.nextSibling).toggle(); 
    }); 
}); 

Answer 3

$(document).ready(function() { 
 
    $('.options-knop').click(function (e) 
 
    { 
 
     $('.options-list').toggle(); 
 
    }); 
 
});

.img-wrapper { 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    border-radius: 100%; 
 
    float: left; 
 
    margin: 5px; 
 
} 
 

 
.img-container { 
 
    height: 100px; 
 
} 
 

 
.artist { 
 
    transition: background-color 0.5s, color 0.5s; 
 
    cursor: pointer; 
 
} 
 

 
.artist-outer { 
 
    margin: 5px 0; 
 
    padding: 10px 5px; 
 
} 
 

 
.artist .naam { 
 
    width: 190px; 
 
} 
 

 
.options-knop { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 325px; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    font-weight: bold; 
 
    width: 30px; 
 
    height: 30px; 
 
    border-radius: 100%; 
 
    color: black !important; 
 
    transition: background-color 0.5s, color 0.5s; 
 
} 
 

 
.artist-outer:nth-child(6n+4), 
 
.artist-outer:nth-child(6n+5), 
 
.artist-outer:nth-child(6n+6) { 
 
    background-color: #eeeeee; 
 
} 
 

 
.artist:nth-child(6n+4) .options-knop, 
 
.artist:nth-child(6n+5) .options-knop, 
 
.artist:nth-child(6n+6) .options-knop { 
 
    background-color: white; 
 
} 
 
.artist:nth-child(6n+1) .options-knop, 
 
.artist:nth-child(6n+2) .options-knop, 
 
.artist:nth-child(6n+3) .options-knop { 
 
    background-color: #eeeeee; 
 
} 
 

 
.options-knop:hover{ 
 
    background-color: #a3a3a3 !important; 
 
    color: white !important; 
 
} 
 

 
.artist-outer:hover{ 
 
    background-color: #545454 !important; 
 
    color: white !important; 
 
} 
 

 
.options-list { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 50px; 
 
    left: 260px; 
 
} 
 

 
.options-list ul { 
 
    padding: 0; 
 
} 
 

 
.naam { 
 
    max-height: 40px; 
 
    overflow: hidden; 
 
} 
 

 
.list-group { 
 
    padding-left: 0; 
 
    margin-bottom: 20px 
 
} 
 

 
.list-group-item { 
 
    position: relative; 
 
    display: block; 
 
    padding: 10px 15px; 
 
    margin-bottom: -1px; 
 
    background-color: #fff; 
 
    color:black; 
 
    border: 1px solid #ddd 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div class='clearfix col-md-4 artist-outer' id='656556255'> 
 
    <div class='artist'> 
 
     <div class='artist-info'> 
 
      <div class='img-wrapper'> 
 
       <img style="width:100px" src='http://i.stack.imgur.com/kYnSM.gif'/> 
 
      </div> 
 
      <p class='naam'><b>Random naam</b></p> 
 
      <p>Volgers op Spotify: XXX</p> 
 
     </div> 
 
     <div class='options-knop'>...</div> 
 
     <div class='options-list list-group' style='display: none;'> 
 
      <a class='list-group-item'>Toon albums</a> 
 
      <a class='list-group-item'>Profiel</a> 
 
     </div> 
 
    </div> 
 
</div>

Answer 4

Прежде всего для меня, я не люблю смешивать JQuery с чистым JavaScript, если нет его потребность в этом

в вашем коде используется

$(document).ready(); 

вместо

$("body").ready 

и использовать

$("body").on(); 

вместо

$(document).on() 

и получить следующий элемент с JQuery вам нужно использовать .next(); .. поэтому код jQuery должен быть таким:

$(document).ready(function() { 
    $("body").on("click", ".options-knop", function() { 

     $(this).next('.options-list').slideToggle(); 

    }); 
});