Форум

SavaSavichev · #1 (**permalink**) 23.01.2014, 02:47

Доброго всем времени суток! Я начинающий, поэтому прошу отнестись с пониманием, даже если проблема совсем пустяковая)
Задача: сделать открытие/скрытие блока с текстом при условии что таких блоков будет много.

Мысль такова: надо при нажвтии отыскивать див следующий сращу за ссылкой и показывать его. А если он показан уже, то при повторном нажатии на ссылку скрывать блок.

Вот что есть в исполнение:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
<script type="text/javascript"> $(document).ready(function(){ $(".button").click(function() {

$(this).next('.toggle').slideToggle() ; }); }); </script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content"><div>Текст1</div>
<div><a class="" href="#">Подробнее</a></div>
<div class="toogle">Текс2</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

В css прописано: .toogle {display:none;}

Но к сожалению не работает. Подскажите пожалуйста, где ошибка что сделал не так? Заранее огромное спасибо!

рони · #2 (**permalink**) 23.01.2014, 03:47

SavaSavichev,
где $(".button") ???
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 23.01.2014, 03:48

SavaSavichev,

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Документ без названия</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script>
 $(document).ready(function () {
    $(".button").click(function () {
        $(this).parent().next().slideToggle();
        return false
    });
});
</script>
<style type="text/css">
 .toogle {display:none;}
</style>
 </head>
 <body>
 <div id="wrapper">
 <div id="content">
 <div>Текст1</div>
 <div><a class="button" href="#">Подробнее</a></div>
 <div class="toogle">Текс2</div>
 </div>
 <div id="footer"></div>
 </div>
 </body>
 </html>

SavaSavichev · #4 (**permalink**) 23.01.2014, 05:07

Сообщение от рони

SavaSavichev,

<!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Документ без названия</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script>
 $(document).ready(function () {
    $(".button").click(function () {
        $(this).parent().next().slideToggle();
        return false
    });
});
</script>
<style type="text/css">
 .toogle {display:none;}
</style>
 </head>
 <body>
 <div id="wrapper">
 <div id="content">
 <div>Текст1</div>
 <div><a class="button" href="#">Подробнее</a></div>
 <div class="toogle">Текс2</div>
 </div>
 <div id="footer"></div>
 </div>
 </body>
 </html>

Спасибо огромное! Только теперь обнаружился как я понимаю "конфликт скриптов". Дело в том что на сайте еще прикручен слайдер. Который как обычно бывает очень нужно оставить. При таком варианте, когда скрипт показать/свернуть находится выше скрипта слайдер, работает показать/свернуть и не работает слайдер. А если скрипт слайдера поставить на верх, то не работает ничего)

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<script src="js/slides.min.jquery.js"></script>
	    <script src="js/jquery-1.4.4.min.js"></script>
		 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
 $(document).ready(function () {
    $(".button").click(function () {
        $(this).parent().next().slideToggle();
        return false
    });
});
</script>
	<script>
        $(function(){
            $('#slides').slides({
                preload: true,
                preloadImage: 'img/loading.gif',
                play: 5000,
                pause: 2500,
                hoverPause: true
            });
        });
    </script>
<style type="text/css">
 .toogle {display:none;}
</style>
<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
<div id="wrapper">
<div id="content">
<div><div id="container">
			<div id="example">
            	<div id="slides">
                	<div class="slides_container">
                            <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-1.jpg" width="800" height="400" alt="Slide 1"></a>
                            <a href="http://www.flickr.com/photos/stephangeyer/3020487807/" title="Taxi | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-2.jpg" width="800" height="400" alt="Slide 2"></a>
                            <a href="http://www.flickr.com/photos/childofwar/2984345060/" title="Happy Bokeh raining Day | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-3.jpg" width="800" height="400" alt="Slide 3"></a>
                            <a href="http://www.flickr.com/photos/b-tal/117037943/" title="We Eat Light | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-4.jpg" width="800" height="400" alt="Slide 4"></a>
                            <a href="http://www.flickr.com/photos/bu7amd/3447416780/" title="“I must go down to the sea again, to the lonely sea and the sky; and all I ask is a tall ship and a star to steer her by.” | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-5.jpg" width="800" height="400" alt="Slide 5"></a>
                            <a href="http://www.flickr.com/photos/streetpreacher/2078765853/" title="twelve.inch | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-6.jpg" width="800" height="400" alt="Slide 6"></a>
                            <a href="http://www.flickr.com/photos/aftab/3152515428/" title="Save my love for loneliness | Flickr - Photo Sharing!" target="_blank"><img src="img/slide-7.jpg" width="800" height="400" alt="Slide 7"></a>
                    </div>
                        <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
                        <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
                </div>
			</div>
        </div></div>
<div>Текст1</div>
<div><a class="button" href="#">Подробнее</a></div>
<div class="toogle">Текс2</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

рони · #5 (**permalink**) 23.01.2014, 10:59

SavaSavichev,
строка 7 выкинуть и забыть, строку 6 можно тоже забыть версия 1.1 сейчас версия 3 http://archive.slidesjs.com/ -- можно незабывать но переставить после строки 8 -- сначала грузится jquery 1 штука потом всё что работает на основе jquery а ненаоборот.
примерно как это должно быть вариант ниже

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<base href="http://slidesjs.com/examples/playing/" />
<title>Документ без названия</title>
		 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
         <script src="js/jquery.slides.min.js"></script>
	<script>
        $(function(){
            $(".button").click(function () {
        $(this).parent().next().slideToggle();
        return false
    });
            $('#slides').slidesjs({
        width: 500,
        height: 300,
        play: {
          active: true,
          auto: true,
          interval: 4000,
          swap: true,
          pauseOnHover: true,
          restartDelay: 2500
        }
      });
        });
    </script>
<style type="text/css">
 .toogle {display:none;}
</style>
<link rel="stylesheet" href="css/example.css">
</head>
<body>
<div id="wrapper">
<div class="container">
    <div id="slides">
      <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
      <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
      <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
      <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
    </div>
  </div>
<div>Текст1</div>
<div><a class="button" href="#">Подробнее</a></div>
<div class="toogle">Текс2</div>
<div id="footer"></div>
</div>
</body>
</html>

SavaSavichev · #6 (**permalink**) 23.01.2014, 14:30

Все заработало! Огромное спасибо!!!

Форум

Справочник

Discord чат

Курсы javascript