Раздвижность при нажатии на div

Я делаю сайт, и я хочу, чтобы это была только одна страница индекса. И когда вы приземлитесь, будет пара строк like this, и когда вы нажмете на строку, она расширит информацию, которая скрывалась снизу, поэтому выглядит like this.Раздвижность при нажатии на div

Теперь я искал вокруг, и я нашел this, и я по существу скопировал и вставил предмет в новый файл, чтобы просто обмануть его, но он не сработал. Я добавил теги html и важные файлы и т. Д., И мой код выглядит так.

//Index 
<!DOCTYPE html> 
<html> 

    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <link href="main.css" rel="stylesheet"> 
    <script type="slide.js"></script> 

<div class="container"> 
    <div class="one">Click me to reveal new div</div> 
    <div class="two">Hey it worked! 
     <br>New Contenttt</div> 
</div> 
</html> 

//main.css 
.container { 
    overflow:hidden; 
    height: 60px; 
} 
.one { 
    position: relative; 
    top: 0; 
    background-color: #FFC300; 
    z-index: 1; 
    cursor:pointer; 
} 
.two { 
    position: relative; 
    top: -40px; 
    background-color: yellow; 
    z-index: -1; 
    -webkit-transition: top 1s; 
    -moz-transition: top 1s; 
    -o-transition: top 1s; 
    transition: top 1s; 
} 
/*.one:hover + .two { 
    top: 0px; 
}*/ 

//slide.jsvar clicked=true; 
$(".one").on('click', function(){ 
    if(clicked) 
    { 
     clicked=false; 
     $(".two").css({"top": 0}); 
    } 
    else 
    { 
     clicked=true; 
     $(".two").css({"top": "-40px"}); 
    } 
});

Однако, похоже, что это не сработало. Что мне не хватает?

источник

2016-02-01 Hello Mellow

добавить код JQuery в –

эм вы можете добавить элемент и к вашему HTML и вы, кажется, прокомментировал out var clicked = true в слайде.js –

Ой, подождите ... Вы просто сбросили все это в index.html или что-то в этом роде? –

var clicked=true;

закомментирован. Раскомментируйте это.

Надеюсь, это поможет.

источник

2016-02-01 08:30:53

В моем фактическом файле у меня есть это без ранения, я просто испортился, когда копирование и вставка –

Я думаю, что вы ищете что-то вроде этого

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function (event) { 
       $(".one").on('click', function(){ 
        $(".two").slideToggle('fast') 
       }); 
      }); 
     </script> 

     <style> 
      .container { 
       overflow:hidden; 
       height: 60px; 
      } 
      .one { 
       background-color: #FFC300;   
       cursor:pointer; 
      } 
      .two { 
       display:none; /* delete this line if you want to show your yellow div by default*/ 
       background-color: yellow;   
      } 
    </style> 
    </head> 

    <div class="container"> 
     <div class="one">Click me to reveal new div</div> 
     <div class="two">Hey it worked! 
     <br>New Contenttt</div> 
    </div> 
</html>

источник

2016-02-01 08:57:55

Я не знаю, как это разметка, так как в вашем предыдущем ответе вы прокомментируете вы написали

Я просто перепутались, когда копия и вставив

Вот полная наценка включая JS и CSS

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <style> 

.container { 
    overflow:hidden; 
    height: 60px; 
} 
.one { 
    position: relative; 
    top: 0; 
    background-color: #FFC300; 
    z-index: 1; 
    cursor:pointer; 
} 
.two { 
    position: relative; 
    top: -40px; 
    background-color: yellow; 
    z-index: -1; 
    -webkit-transition: top 1s; 
    -moz-transition: top 1s; 
    -o-transition: top 1s; 
    transition: top 1s; 
} 

</style> 

</head> 
<body> 
    <div class="container"> 
    <div class="one">Click me to reveal new div</div> 
    <div class="two">Hey it worked! 
     <br>New Contenttt</div> 
</div> 
<script> 

     var clicked=true; 
     $(".one").on('click', function(){ 
    if(clicked) 
     { 
     clicked=false; 
     $(".two").css({"top": 0}); 
    } 
    else 
    { 
     clicked=true; 
     $(".two").css({"top": "-40px"}); 
    } 
}); 
    </script> 
    </body> 
</html>

ПРИМЕЧАНИЕ. Я включаю в себя body, & head тег. Также, пожалуйста, обновите вы отсылая CSS и JS от внешнего file.Currently Я со ссылкой CSS и JS из одной страницы

WORKING DEMO

источник

2016-02-01 09:02:05 brk

Изменить

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> to <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> in index.html

и <script type="slide.js"></script> к <script src="slide.js"></script> и вставлять код в $(document).ready(function() { }); and Uncomment var clicked=true;

Окончательный код будет

index.html

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
    <script src="slide.js"></script> 
    <link href="main.css" rel="stylesheet"> 
</head> 
<body> 
    <div class="container"> 
     <div class="one">Click me to reveal new div</div> 
     <div class="two">Hey it worked! 
      <br>New Contenttt</div> 
    </div> 
</body>

slide.js

$(document).ready(function() { 
var clicked = true; 
$(".one").on('click', function() { 
    if (clicked) 
    { 
     clicked = false; 
     $(".two").css({"top": 0}); 
    } 
    else 
    { 
     clicked = true; 
     $(".two").css({"top": "-40px"}); 
    } 
});

});

main.css

.container { 
overflow:hidden; 
height: 60px; 
} 
.one { 
position: relative; 
top: 0; 
background-color: #FFC300; 
z-index: 1; 
cursor:pointer; 
} 
.two { 
position: relative; 
top: -40px; 
background-color: yellow; 
z-index: -1; 
-webkit-transition: top 1s; 
-moz-transition: top 1s; 
-o-transition: top 1s; 
transition: top 1s; 
} 
/*.one:hover + .two { 
top: 0px; 
}*/

источник

2016-02-01 10:15:54 Shashikala

Раздвижность при нажатии на div

ответ

Смежные вопросы