Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   помогите древовидный список (https://javascript.ru/forum/dom-window/54212-pomogite-drevovidnyjj-spisok.html)

jacks 09.03.2015 10:29
помогите древовидный список
 
Есть код вывода древовидного списка
<!doctype html public "-//w3c//dtd html 4.01//en"  "http://www.w3.org/tr/html4/strict.dtd"> 
<html> 
<head>

<title>New Tickets: ReqList</title>
        
<head>
 <script type="text/javascript" src="../js/jquery/jquery.min.js" > </script>

<style>

ul.ul-dropfree div.drop {
width:11px;
height:11px;
position:absolute;
z-index:10;
top:6px;
left:-6px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
background-position:-11px 0;
background-repeat:no-repeat;
cursor:pointer;
}

ul.li-tree{padding-left:2em}
ul.li-tree ul{margin:0;padding-left:2.5em;background-color:#FFF}
ul.li-tree li{list-style:none outside none;border-left:1px dotted #000;margin:0}
ul.li-tree div{border-bottom:1px dotted #000;position:absolute;width:1.5em;height:.75em}
ul.li-tree p{margin:0 0 0 1.75em;padding:.25em 0;background-color:#FFFFFF}
ul.li-tree li:last-child ul{position:relative;left:-1px}
ul.li-tree li:last-child{border-left:0 none}
ul.li-tree li:last-child > div{border-left:dotted 1px #000}
ul.ul-treefree{padding-left:25px}
ul.ul-treefree ul{margin:0;padding-left:6px}
ul.ul-treefree li{position:relative;list-style:none outside none;border-left:solid 1px #999;margin:0;padding:0 0 0 19px;line-height:23px}
ul.ul-treefree li:before{content:'';display:block;border-bottom:solid 1px #999;position:absolute;width:18px;height:11px;left:0;top:0}
ul.ul-treefree li:last-child{border-left:0 none}
ul.ul-treefree li:last-child:before{border-left:solid 1px #999}
ul.ul-dropfree div.drop{width:11px;height:11px;position:absolute;z-index:10;top:6px;left:-6px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');background-position:-11px 0;background-repeat:no-repeat;cursor:pointer}
ul.ul-tree{padding-left:2em;padding-bottom:12px}
ul.ul-tree ul{margin:0;padding-left:17px}
ul.ul-tree li{position:relative;list-style:none outside none;border-left:1px solid rgba(0,0,0,.5);margin:0;line-height:24px}
ul.ul-tree p{position:relative;top:12px;margin:0 0 0 2.5em;padding:0 0}
ul.ul-tree p:before{content:'';display:block;border-bottom:1px solid rgba(0,0,0,.5);position:absolute;width:2.5em;height:24px;left:-2.5em;top:-12px}
ul.ul-tree li:last-child{border-left:0 none}
ul.ul-tree li:last-child > p:before{border-left:solid 1px rgba(0,0,0,.5)}
ul.ul-drop div.drop{width:11px;height:11px;position:absolute;z-index:10;top:19px;left:12px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAYAAAB7/H1+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGtJREFUeNrck8EOwCAIQ9vF///lTjdniIEMDrusB43xgQUiAAi3Mnua5bV24UXsqrCHecVeeLw8NpBGYiZhVthWcYG81KYL7eXb82wr12AYG3/Y5djOZAQ6M9IW/LMeu46DUlms7pufdwowAAbFQP9vY58OAAAAAElFTkSuQmCC');background-position:-11px 0;background-repeat:no-repeat;cursor:pointer}


</style>

</head>

<body>


<script>
$( document ).ready(function() {
  
  $(".ul-dropfree").find("li:has(ul)").prepend('<div class="drop"></div>');
	$(".ul-dropfree div.drop").click(function() {
		if ($(this).nextAll("ul").css('display')=='none') {
			$(this).nextAll("ul").slideDown(400);
			$(this).css({'background-position':"-11px 0"});
		} else {
			$(this).nextAll("ul").slideUp(400);
			$(this).css({'background-position':"0 0"});
		}
	});
	$(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});
  
});

</script>

<script type="text/javascript"> 
    $(document).ready(function() { 
      $("A#trigger").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script>
       
  <script type="text/javascript">
  function showOrHide(cb, cat) {
    cb = document.getElementById(cb);
    cat = document.getElementById(cat);
    if (cb.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }
</script>     
       
 <br> <a href='#' id='trigger'><b>Open reqlists</b></a>
               
<div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>


<ul class="ul-treefree ul-dropfree">
<li>Программирование
<ul>
	<li>PHP<ul>
			<li>111</li>
			<input type = 'checkbox' id = 'dd' onchange='showOrHide("dd", "d3");'/>
			<li>222</li>
			<div id = 'd3' style = 'display: none;'>
			<input type="radio" name="n" checked>1
			<input type="radio" name="n">2
			</div>
			</ul>
			</li>
	</ul>
	
	</li>
	
	<li>JavaScript</li>
	<li>MySQL</li>
	<li>htaccess</li>
	<li>regular expression</li>
</ul>
</li>

</ul>

</div>

</body>
</html>

проблема в то что после нажатия на Open reqlists список получается открытым, а должен быть закрытым, как его сделать закрытым?

рони 09.03.2015 12:42
jacks,
убрать строки 118 и 120 , 7 и по возможности забыть о toggle как переключателе click, если хотите использовать актуальные версии jquery

jacks 09.03.2015 13:22
строки убрал все равно список открытый после нажатия. если дело в toggle на что заменить?

рони 09.03.2015 13:27
jacks,
<!doctype html public "-//w3c//dtd html 4.01//en"  "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>

<title>New Tickets: ReqList</title>

 <meta charset="utf-8">
 <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js" > </script>

<style>

ul.ul-dropfree div.drop {
width:11px;
height:11px;
position:absolute;
z-index:10;
top:6px;
left:-6px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');
background-position:-11px 0;
background-repeat:no-repeat;
cursor:pointer;
}

ul.li-tree{padding-left:2em}
ul.li-tree ul{margin:0;padding-left:2.5em;background-color:#FFF}
ul.li-tree li{list-style:none outside none;border-left:1px dotted #000;margin:0}
ul.li-tree div{border-bottom:1px dotted #000;position:absolute;width:1.5em;height:.75em}
ul.li-tree p{margin:0 0 0 1.75em;padding:.25em 0;background-color:#FFFFFF}
ul.li-tree li:last-child ul{position:relative;left:-1px}
ul.li-tree li:last-child{border-left:0 none}
ul.li-tree li:last-child > div{border-left:dotted 1px #000}
ul.ul-treefree{padding-left:25px}
ul.ul-treefree ul{margin:0;padding-left:6px}
ul.ul-treefree li{position:relative;list-style:none outside none;border-left:solid 1px #999;margin:0;padding:0 0 0 19px;line-height:23px}
ul.ul-treefree li:before{content:'';display:block;border-bottom:solid 1px #999;position:absolute;width:18px;height:11px;left:0;top:0}
ul.ul-treefree li:last-child{border-left:0 none}
ul.ul-treefree li:last-child:before{border-left:solid 1px #999}
ul.ul-dropfree div.drop{width:11px;height:11px;position:absolute;z-index:10;top:6px;left:-6px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');background-position:-11px 0;background-repeat:no-repeat;cursor:pointer}
ul.ul-tree{padding-left:2em;padding-bottom:12px}
ul.ul-tree ul{margin:0;padding-left:17px}
ul.ul-tree li{position:relative;list-style:none outside none;border-left:1px solid rgba(0,0,0,.5);margin:0;line-height:24px}
ul.ul-tree p{position:relative;top:12px;margin:0 0 0 2.5em;padding:0 0}
ul.ul-tree p:before{content:'';display:block;border-bottom:1px solid rgba(0,0,0,.5);position:absolute;width:2.5em;height:24px;left:-2.5em;top:-12px}
ul.ul-tree li:last-child{border-left:0 none}
ul.ul-tree li:last-child > p:before{border-left:solid 1px rgba(0,0,0,.5)}
ul.ul-drop div.drop{width:11px;height:11px;position:absolute;z-index:10;top:19px;left:12px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAYAAAB7/H1+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGtJREFUeNrck8EOwCAIQ9vF///lTjdniIEMDrusB43xgQUiAAi3Mnua5bV24UXsqrCHecVeeLw8NpBGYiZhVthWcYG81KYL7eXb82wr12AYG3/Y5djOZAQ6M9IW/LMeu46DUlms7pufdwowAAbFQP9vY58OAAAAAElFTkSuQmCC');background-position:-11px 0;background-repeat:no-repeat;cursor:pointer}


</style>

</head>

<body>


<script>
$( document ).ready(function() {

  $(".ul-dropfree").find("li:has(ul)").prepend('<div class="drop"></div>');
	$(".ul-dropfree div.drop").click(function() {
		if ($(this).nextAll("ul").css('display')=='none') {
			$(this).nextAll("ul").slideDown(400);
			$(this).css({'background-position':"-11px 0"});
		} else {
			$(this).nextAll("ul").slideUp(400);
			$(this).css({'background-position':"0 0"});
		}
	});
	$(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({'background-position':"0 0"});

});

</script>

<script type="text/javascript">
    $(document).ready(function() {
      $("A#trigger").toggle(function() {
        // Отображаем скрытый блок
        $("DIV#box").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },
      function() {
        // Скрываем блок
        $("DIV#box").fadeOut(); // fadeOut - плавное исчезновение
        return false; // не производить переход по ссылке
      }); // end of toggle()
    }); // end of ready()
  </script>

  <script type="text/javascript">
  function showOrHide(cb, cat) {
    cb = document.getElementById(cb);
    cat = document.getElementById(cat);
    if (cb.checked) cat.style.display = "block";
    else cat.style.display = "none";
  }
</script>

 <br> <a href='#' id='trigger'><b>Open reqlists</b></a>

<div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>
<ul class="ul-treefree ul-dropfree">
<li>Программирование
<ul>
	<li>PHP<ul>
			<li>111</li>
			<input type = 'checkbox' id = 'dd' onchange='showOrHide("dd", "d3");'/>
			<li>222</li>
			<div id = 'd3' style = 'display: none;'>
			<input type="radio" name="n" checked>1
			<input type="radio" name="n">2
			</div>
			</ul>
			</li>
	<li>JavaScript</li>
	<li>MySQL</li>
	<li>htaccess</li>
	<li>regular expression</li>
</ul>
</li>
</ul>
</div>

</body>
</html>

jacks 09.03.2015 15:29
спасибо


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