Bootstrap Collapse - 点击其他关闭

时间:2015-06-15 12:37:31

标签: javascript jquery html css twitter-bootstrap

我正在使用Bootstrap / Collapse这三个按钮。你可以看到它here - 那3个黄色按钮。当我单击第一个按钮然后单击第二个按钮时,我想通过单击第二个按钮关闭第一个div。你能帮帮我怎么办?

这里有一些支持代码:

<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#price" aria-expanded="false" aria-controls="price">Podle ceny</a>
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#manufacturers" aria-expanded="false" aria-controls="manufacturers">Podle značky</a>
<a class="btn btn-primary btn-sm" data-toggle="collapse" href="#13" aria-expanded="false" aria-controls="13">Podle velikosti</a>

<ul>
  <li data-type="price" data-base-type="price" data-id="price" data-seo-name="price" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-price mfilter-price collapse" id="price">
  ...
  </li>
  <li data-type="checkbox" data-base-type="manufacturers" data-id="manufacturers" data-seo-name="manufacturers" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-checkbox mfilter-manufacturers collapse" id="manufacturers">
  ...
  </li>
  <li data-type="checkbox" data-base-type="option" data-id="13" data-seo-name="13o-velikost" data-inline-horizontal="0" data-display-live-filter="0" data-display-list-of-items="" class="mfilter-filter-item mfilter-checkbox mfilter-option mfilter-options collapse" id="13">
  ...
  </li>
</ul>

1 个答案:

答案 0 :(得分:0)

实现所需输出的方法之一是使用jquery。我已经使用这里编写的脚本实现了类似的功能。您可以在系统上运行并查找效果。

protected void SupportSchedule_RowCommand(object sender, GridViewCommandEventArgs e) 
{
    if (e.CommandName == "EditRow") 
    {
        int rowIndex = ((GridViewRow)((ImageButton) e.CommandSource).NamingContainer).RowIndex;

        // Set the index to edit
        SupportScheduleTable.EditIndex = rowIndex;

        // Re-bind the GridView to put it in edit mode
        SupportScheduleTable.DataSource = /* your data source */
        SupportScheduleTable.DataBind();

        // Get the row at the index. The row will be the
        // row reflected in edit mode.
        GridViewRow editRow = SupportScheduleTable.Rows[rowIndex];

        // Find your DropDownLists in this edit row
        DropDownList ddl1 = editRow.FindControl("ddlshiftmanager") as DropDownList;
        DropDownList ddl2 = editRow.FindControl("ddldispatcherone") as DropDownList;
        DropDownList ddl3 = editRow.FindControl("ddldispatchertwo") as DropDownList;

        shift.Enabled = true;
        resourcedate.Enabled = true;
        ListItemCollection c = db.fillList();

        if (c != null && ddl1 != null) 
        {
            ddl1.DataSource = c;
            ddl2.DataSource = c;
            ddl3.DataSource = c;
            ddl1.DataBind();
            ddl2.DataBind();
            ddl3.DataBind();
        }
        getSupportSchedule();
    }

    // Everything else...

}

使用id button1,button2和button3在html代码的body标签内附加三个按钮。

现在,要获得确切的功能,请替换类名和ID以获得确切的功能。