Question

点击提交按钮时，我希望panel-default为opacity: 0分别拥有inspiration：

<% @inspirations.each do |inspiration| %> # List of featured inspirations for user to choose from
  <%= simple_form_for(current_user.inspirations.build) do |f| %>
    <div class="panel panel-default"> # Once user clicks pushpin I want the inspiration he clicked to get opacity 0
      <%= button_tag(type: 'submit', class: 'button-bitches') do %>
        <span class="glyphicon glyphicon-pushpin"></span>
      <% end %>
      <%= f.hidden_field :name, value: inspiration.name %>
      <%= inspiration.name %>
    </div>
  <% end %>
<% end %>

更新1

我现在可以点击按钮消失，但我仍然无法让面板消失。

<script>
    $('.button-bitches').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });
</script>

CSS

.panel-default.active {
  opacity: 0;
}

.button-bitches.active {
  opacity: 0;
}

更新2

这会给.panel-default不透明度0，这就是我想要的，但它会为每个inspiration执行此操作。我希望它只是为了点击的灵感。

$('.button-bitches').click(function(){
    if($(this).hasClass('active')){
        $('.panel-default').removeClass('active')
    } else {
        $('.panel-default').addClass('active')
    }
});

Answer 1

我看到按钮是panel-default的孩子，你应该试试这个：

$('.button-bitches').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active');
            $(this).parents('.panel-default').removeClass('active');
        } else {
            $(this).addClass('active');
            $(this).parents('.panel-default').addClass('active');
        }
    });

这也可以缩短为：

$('.button-bitches').click(function(){
            if($(this).hasClass('active')){
                $(this).removeClass('active')
                       .parents('.panel-default').removeClass('active');
            } else {
                $(this).addClass('active')
                       .parents('.panel-default').addClass('active');
            }
        });

或者您可以切换active类

        $('.button-bitches').click(function(){
                $(this).toggleClass('active')
                       .parents('.panel-default').toggleClass('active');
        });

PS：我没有对它进行测试，但我确信只要button是.panel-default的孩子并且您的CSS是正确的，它就能正常工作

Answer 2

可以试试这个。

<div class="panel panel-default" id="hidepanel">....</div>

<span class="glyphicon glyphicon-pushpin" onclick="hidediv();"></span>

Javascript文件：

function hidediv() {
document.getElementById("hidepanel").style.opacity = "0";}

请改变这样的css

.panel-default:active {
  opacity: 0;
 }

 .button-bitches:active {
    opacity: 0;
 }

如何在点击按钮时隐藏面板？

更新1

更新2

2 个答案: