选项不点击时显示

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

一切对我来说，我不喜欢用纯JavaScript混合的jQuery首先如果没有必要的

您的代码使用

$(document).ready(); 

代替

$("body").ready 

，并使用

​​

，而不是

$(document).on() 

，并获得下一个元素不同，需要使用。接下来的jQuery（）; ..所以jQuery的代码应该是这样的

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

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

    }); 
});