Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Информационное меню по клику (https://javascript.ru/forum/dom-window/45857-informacionnoe-menyu-po-kliku.html)

Kindret 18.03.2014 19:13

Информационное меню по клику
 
Доброго времени суток дорогие, и уважаемые форумчане!
Уже не первый день курю ваш форум, и нашел много готовых решений, но сейчас найти ничего не могу.
Интересует создание меню, при клике на пункт которого, открывается div с информацией.
Проблема состоит в том, что руки мои растут из не правильного места.
Попытку реализации можно посмотреть тут: http://kb-tk.ru/tests

Здесь сделал через toogle, при клике открывается, при повторном закрывается, но если из первого пункта меню перешел в другой, то повторный клик на первом пункте, не дает результата.

Желателен вариант, с полным закрытием div'a по клику вне его.
В песочнице пытался реализовать следующим образом: http://learn.javascript.ru/play/G0Xxw
Но вариант, тоже не фонтан.

Kindret 19.03.2014 10:56

Пытаясь разобраться, пришел к следующему пробному варианту:
http://learn.javascript.ru/play/o4w37b
Подскажите, как сюда прикрутить закрытие div, при клике по body???:help:

рони 19.03.2014 11:51

Kindret,
Варианты на тему открыть закрыть див, открыть другой див закрыть прежний, закрыть все при клике во вне :write:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tabs demo</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <style type="text/css">
body{
    background-color: #D2B48C;
  }
  </style>
<script>
$(window).load(function(){
var container = $("#tabs");
  container.tabs({collapsible: true , active: false});
    $(document).mouseup(function (e) {
    if (container.has(e.target).length === 0){
        container.find('.ui-state-active span').trigger('click');
    }
  });
});
</script>
</head>

<body>
  <div id="tabs">
    <ul>
      <li>
        <a href="#fragment-1"><span>One</span></a>
      </li>

      <li>
        <a href="#fragment-2"><span>Two</span></a>
      </li>

      <li>
        <a href="#fragment-3"><span>Three</span></a>
      </li>
    </ul>

    <div id="fragment-1">
      <p>First tab is active by default:</p>
      <pre>
<code>$( "#tabs" ).tabs(); </code>
</pre>
    </div>

    <div id="fragment-2">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
      tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat.
    </div>

    <div id="fragment-3">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
      tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet,
      consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
      aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
      nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </div>
  </div>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script>
  <script type='text/javascript' src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style type="text/css">
  body{
    background-color: #D2B48C;
  }
  </style>
<script>
$(window).load(function(){
     var container = $(".accordion");
      container.accordion({
				header: "> h3",
				active: false,
				collapsible: true,
				heightStyle: "content",
                event: "click hoverintent"
			})
    $(document).mouseup(function (e) {
    if (container.has(e.target).length === 0){
        container.find('.ui-state-active').trigger('click');
    }
});

});
</script>
</head>
<body>
  <div class="accordion">
	  <h3>Section 1</h3>
	  <div>
		<div class="accordion">
			<h3>Inner Section 1</h3>
			<div>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
			</div>

			<h3>Inner Section 2</h3>
			<div>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
				suscipit faucibus urna.
			</div>
		</div>
	  </div>
	  <h3>Section 2</h3>
	  <div>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
	  </div>
	</div>
</body>
</html>

ksa 19.03.2014 11:56

Цитата:

Сообщение от Kindret
пришел к следующему пробному варианту:
http://learn.javascript.ru/play/o4w37b
Подскажите, как сюда прикрутить закрытие div, при клике по body?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
var _click = function () {
	var b = 1;
	return function (c) {
		var a = document.getElementById("item" + b);
		c == b && (a.style.display = "none" == a.style.display ? "" : "none");
		c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c)
	}
}();
document.onclick=function (event) {
	var target = event.target || event.srcElement;
	if (target.className=='item') {
		return;
	};
	if (target.className!='target') {
		var o=document.querySelectorAll('.target');
		for (var i=0; i<o.length; i++) {
			o[i].style.display = "none";
		};
	};
}
</script>
</head>
<body>
<div id="menu"> 
	<ul>
		<li><a onclick="_click(1); return false;" class='item' href="#">1</a></li>
		<li><a onclick="_click(2); return false;" class='item' href="#">2</a></li>
		<li><a onclick="_click(3); return false;" class='item' href="#">3</a></li>
	</ul>
</div>
<div style=" display:none" id="item1" class='target'>div1</div>
<div style=" display:none" id="item2" class='target'>div2</div>
<div style=" display:none" id="item3" class='target'>div3</div>
</body>
</html>

Kindret 19.03.2014 13:26

По неизвестной мне пока причине, при подключении к div класса class="target", div вообще перестает открываться. Курю... Пытаюсь решить.
Буду благодарен за помощь...

Kindret 19.03.2014 13:27

Цитата:

Сообщение от ksa (Сообщение 303197)
Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
var _click = function () {
	var b = 1;
	return function (c) {
		var a = document.getElementById("item" + b);
		c == b && (a.style.display = "none" == a.style.display ? "" : "none");
		c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c)
	}
}();
document.onclick=function (event) {
	var target = event.target || event.srcElement;
	if (target.className=='item') {
		return;
	};
	if (target.className!='target') {
		var o=document.querySelectorAll('.target');
		for (var i=0; i<o.length; i++) {
			o[i].style.display = "none";
		};
	};
}
</script>
</head>
<body>
<div id="menu"> 
	<ul>
		<li><a onclick="_click(1); return false;" class='item' href="#">1</a></li>
		<li><a onclick="_click(2); return false;" class='item' href="#">2</a></li>
		<li><a onclick="_click(3); return false;" class='item' href="#">3</a></li>
	</ul>
</div>
<div style=" display:none" id="item1" class='target'>div1</div>
<div style=" display:none" id="item2" class='target'>div2</div>
<div style=" display:none" id="item3" class='target'>div3</div>
</body>
</html>

Я про этот пример...

ksa 19.03.2014 13:36

Цитата:

Сообщение от Kindret
Я про этот пример...

Он полностью рабочий...

Kindret 19.03.2014 13:36

Спасибо! Разобрался! из за CSS ссылочка уехала, и я не попадал по ней. Теперь все работает!


Часовой пояс GMT +3, время: 08:52.