我有一个无序列表,其中的列表项包含表格。这些列表项可以拖拽和排序。我正在尝试在点击列表元素时隐藏它。我有一段jQuery代码,但似乎不起作用。请帮我解决这个问题。HTML代码如下:
<ul class="sortable">
<li class="list" id="first">1</li>
<li class="list" id="second">2</li>
<li class="list" id="third">3</li>
<li class="list" id="fourth">4</li>
<li class="list" id="fifth">5</li>
<li class="list" id="sixth">6</li>
<li class="list" id="seventh">7</li>
<li class="list" id="eighth">8</li>
<li class="list" id="ninth">9</li>
<li class="list" id="tenth">10</li>
</ul>
使用的jQuery版本为:
<script type="text/javascript">
$(function(){
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
});
//ONCLICK CLOSE
$(".list").click(function() {
var tblId=$(this).attr("id");
alert(tblId);
$("#"+tblId).hide();
});
</script>
有些链接我用过,但不确定这些链接是否会影响功能。页面上的链接包括:
<!--script src="js/jQuery.min.js" type="text/javascript"></script-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!--script src="js/jquery-ui.js" type="text/javascript"></script-->
<link rel="stylesheet" type="text/css" href="css/jquery.contextmenu.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
<script src="js/jquery.contextmenu.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />