仅在单击父列表项时切换

时间:2016-02-21 12:01:34

标签: javascript jquery

我有一个简单的基于public static String tipsMade(String date1, String date2){ Connection c = null; Statement stmt = null; ResultSet rs = null; String ans= null; int sum = 0; try { Class.forName("org.sqlite.JDBC"); c = DriverManager.getConnection("jdbc:sqlite:C:\\Users\\Gil\\test.db"); c.setAutoCommit(false); System.out.println("Opened database successfully"); stmt = c.createStatement(); rs = stmt.executeQuery("select sum(tips) from shifts where fulldate between "+"'"+date1+"'"+"and " +"'"+date2+"'"+ ";"); while(rs.next()){ sum = rs.getInt("sum(tips)"); } ans = Integer.toString(sum); // //close connections and etc stmt.close(); c.commit(); c.close(); } catch ( Exception e ) { System.err.println( e.getClass().getName() + ": " + e.getMessage() ); System.exit(0); } return ans; } 的列表,当我点击父项或子项时切换。我希望它仅在单击父项时切换。

ol li

https://jsfiddle.net/k2jqqbbk/3/

我尝试用$("#expList > li").click(function () { $(this).find("ol").slideToggle(); }); 定位它,但这不起作用。我尝试了其他一些没有用的选项。

4 个答案:

答案 0 :(得分:2)

您可以使用event.target检查其最近的li是否包含ol,并且仅在切换时才会切换:

$('#expList > li').click(function(evt) {

    if ($(evt.target).closest('li').has('ol').length) {     
        $(this).find("ol").slideToggle();
    }

});

Here's a fiddle

答案 1 :(得分:1)

您需要定位body { font-family: Arial, sans-serif; background-color: #738294; } #container { width: 900px; padding: 30px; margin: 0 auto; background-color: #FFF; box-shadow: 5px 5px 5px; } h1{ position: relative; text-shadow: 3px 3px 3px #CCC; } #header h1{ /*background-image: url(../images/target.jpg); width:660px; height: 165px; text-indent: -9990px;*/ } #header h1 a:link, #header h1 a:visited { display: block; text-decoration: none; /*width: 660px; height: 165px;*/ } #nav { margin: 0; padding: 0; background-color: yellow; } #nav li { list-style: none; float: left; padding: 0; position: relative; } #nav li a { text-decoration: none; text-align: center; padding: 5px; display: block; border-right: 1px solid #b520ff; width: 80px; height: 25px; } #nav li:hover > a { background-color: #904b24; color: yellow; } #nav li:hover a:hover { background-color: blue; } #nav ul.sub1 { display: none; position: absolute; background-color: yellow; } #nav li:hover .sub1 { display: block; } #body { background: url(../images/pink.jpg); } #body p { line-height: 1.6em; } .main { width: 600px; float: left; } .main-inner { padding: 0 60px 0 0; } .side { width: 300px; float: left; } #footer { background-color: #4D5B6C; color: #FFF; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ /* @end */ 标记。由于a是下一个孩子,ol来电已被find调用所取代:

next

如果您希望将功能扩展到儿童的孩子,只需从选择器中省略$("#expList > li > a").click(function () { $(this).next().slideToggle(); });

#expList

<强> Fiddle

答案 2 :(得分:0)

尝试添加以下代码:

using System.Linq;
using System.Web.Mvc;
using System.Web;

public BandProfileModel CreateBandProfile(BandProfileModel model, HttpPostedFileBase file)
{
}

答案 3 :(得分:0)

点击事件会冒泡到祖先元素。因此,首先针对第二级列表项触发点击,然后冒泡到第一级列表项。这就是你看到切换发生的原因。

您需要做的就是停止点击事件从第二级列表项中冒泡元素链。

添加此内容以修复:

PUT

以下是示例:https://jsfiddle.net/sxn5bg3x/