Форум

Denny · #1 (**permalink**) 26.05.2014, 19:34

Два элемента 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);

рони · #2 (**permalink**) 26.05.2014, 20:29

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>

Denny · #3 (**permalink**) 26.05.2014, 20:37

Спасибо, разобрался сам. Но ваш вариант, тоже очень хорош, даже лучше моего!

Форум

Справочник

Discord чат

Курсы javascript