如何才能让这种点击不断发生？

Question

我想要的是＆＃39; .child＆＃39;图像始终在屏幕上，但.parent div显示和隐藏。我已经能够让它显示一次并隐藏一次，但我似乎无法弄清楚如何让它重复出现。

＆＃13;

＆＃13;

var main = function() {

  $('#logo').on('click',function() {
    $(this).parent('.parent').css('visibility', 'visible');
    $('#logo').on('click',function() {
      $(this).parent('.parent').css('visibility', 'hidden');
    });
  });


};

$(document).ready(main);

＆＃13;

.jumbotron {
  height: 250px;
  width: 100%;
  display: flex;
  border: 1px solid green;
}
.parent {
  margin: auto;
  display: flex;
  height: 200px;
  width: 80%;
  border: 1px solid black;
  visibility: hidden;
}
.child {
  width: auto;
  height: 100px;
  margin: auto;
  visibility: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='jumbotron'>
  <div class='parent'>
    <img id='logo' class='child' src="http://content.sportslogos.net/logos/6/216/full/813.gif" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用单个处理程序切换DIV的可见性。

＆＃13;

＆＃13;

var main = function() {

  $('#logo').on('click',function() {
    $(this).parent(".parent").css("visibility", function(i, oldvis) {
        return oldvis == "visible" ? "hidden" : "visible";
    });
  });

};

$(document).ready(main);

＆＃13;

.jumbotron {
  height: 250px;
  width: 100%;
  display: flex;
  border: 1px solid green;
}
.parent {
  margin: auto;
  display: flex;
  height: 200px;
  width: 80%;
  border: 1px solid black;
  visibility: hidden;
}
.child {
  width: auto;
  height: 100px;
  margin: auto;
  visibility: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='jumbotron'>
  <div class='parent'>
    <img id='logo' class='child' src="http://content.sportslogos.net/logos/6/216/full/813.gif" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

进行切换的简单方法：

var main = function() {

  var visible = false;

  $('#logo').on('click',function() {

    visible = !visible;

    var val = (visible) ? 'visible' : 'hidden';
    $(this).parent('.parent').css('visibility', val);


  });

};

Answer 3

早些时候尝试过，但一定是在我的代码中犯了错误。

添加了.active类，并且能够使用.toggleClass（'active'）;

import java.util.Scanner

public static void main(String[] args) {
    Scanner fin = null;

    // Loop through files
    for(int i = 0; i < filenames.length; i++) {

        // Open the file with a FileReader
        fin = new Scanner(new BufferedReader(new FileReader(filenames[i])));

        // Loop through x chars and add to string
        for(int j = 0; j < x && fin.hasNext(); j++) {
            chars[i] += fin.next();
        }

        // Close your file
        fin.close();
    }
}

var main = function() {

  $('#logo').click(function() {
    $(this).parent('.parent').toggleClass('active');

  });


};

$(document).ready(main);

.jumbotron {
  height: 250px;
  width: 100%;
  display: flex;
  border: 1px solid green;
}
.parent {
  margin: auto;
  display: flex;
  height: 200px;
  width: 80%;
  border: 1px solid black;
  background: rgba(0, 0, 0, .2);
}
.active {
  visibility: hidden;
}
.child {
  width: auto;
  height: 100px;
  margin: auto;
  visibility: visible;
}