Подскажите в чем ошибка?
Два элемента div. по нажатию на один из них, второму присваивается display:none; По второму нажатию, див снова отображается. Не могу найти ошибку в коде. Помогите пожалуйста!
<div class="show" name= "shw">
<img src="box.png" class="showButton"><p id="shb">Show/Hide</p>
</div>
<div class="main" style="display: block;" name="mn">
<div class="pocketchoose" >
<div class="chosen" rel='1' name="pct">
<img src="//" alt="1" >
<p>1</p>
</div>
</div>
<div class="pocketchoose" >
<div class="chosen" rel='2' name="pct">
<img src="//" alt="2">
<p>2</p>
</div>
</div>
<div class="pocketchoose" >
<div class="chosen" rel='3' name="pct">
<img src="//" alt="3">
<p>3</p>
</div>
</div>
</div>
<div class="show" name="shw">
<img src="box.png" class="showButton"><p id="shb">Show/Hide</p>
</div>
<div class="main" style="display: block;" name="mn">
<div id="initials">
<div class="img_init">
<img id="jimg" src="in_jacket.png">
<input type="text" class="inits" placeholder="input_text" value="">
</div>
</div>
</div>
function SH() {
var self = $(this);
console.log(self.next('div').css('display'));
var flag = true;
if (flag) {
self.next('div').css('display','none');
var flag = true;
console.log(flag);
}
else {
self.next('div').css('display','block');
var flag = true;
console.log(flag);
}
}
$('.show').on('click',SH);
$('.showButton').on('click',SH);
|
Denny,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main{
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function ()
{
var $show = $('.show');
$show.on('click', function ()
{
var self = $(this);
$show.not(self).next('div').hide();
self.next('div').toggle();
}
);
}
)
</script>
</head>
<body>
<div class="show" name= "shw">
<img src="box.png" class="showButton"><p id="shb">Show/Hide</p>
</div>
<div class="main" name="mn">
<div class="pocketchoose" >
<div class="chosen" rel='1' name="pct">
<img src="//" alt="1" >
<p>1</p>
</div>
</div>
<div class="pocketchoose" >
<div class="chosen" rel='2' name="pct">
<img src="//" alt="2">
<p>2</p>
</div>
</div>
<div class="pocketchoose" >
<div class="chosen" rel='3' name="pct">
<img src="//" alt="3">
<p>3</p>
</div>
</div>
</div>
<div class="show" name="shw">
<img src="box.png" class="showButton"><p id="shb">Show/Hide</p>
</div>
<div class="main" name="mn">
<div id="initials">
<div class="img_init">
<img id="jimg" src="in_jacket.png">
<input type="text" class="inits" placeholder="input_text" value="">
</div>
</div>
</div>
</body>
</html>
|
Спасибо, разобрался сам. Но ваш вариант, тоже очень хорош, даже лучше моего!
|
| Часовой пояс GMT +3, время: 00:45. |