单击一次只打开一个

Question

我是JQuery的新手，我如何一次只打开一个下拉菜单？

df = pd.read_csv('path_to_file.csv')

# Group by the desired columns
new_df = df.groupby(['year', 'Tag_1', 'Tag_2']).sum()
# Sort descending
new_df.sort('Metric', inplace=True)


# Helper function for generation sequence of 'r' 'b' colors
def get_color(i):
    if i%2 == 0:
        return 'r'
    else:
        return 'b'

colors = [get_color(j) for j in range(new_df.shape[0])]

# Make the plot
fig, ax = plt.subplots()
ind = np.arange(new_df.shape[0])
width = 0.65
a = ax.barh(ind, new_df.Metric, width, color = colors) # plot a vals
ax.set_yticks(ind + width)  # position axis ticks
ax.set_yticklabels(new_df.index.values)  # set them to the names
fig.tight_layout()
plt.show()

我只想在显示加号或减号时显示/下拉 http://jsfiddle.net/u3aufkg8/

Answer 1

您只需在单击时实际使用最接近的<h3>元素，以便知道要向下滑动的部分。您可以在关闭所有当前元素后使用closest()函数执行此操作：

// Store your closest H3 element
var currentH3 = $(this).closest('h3');
// Use it to handle showing / hiding
if (!$(currentH3).next().is(":visible")) {
        // If this section hasn't been shown, then show it
        $(currentH3).next().slideDown();
        // Update the icon to reflect the current state
        $('.plus',currentH3).html('-');
}

所以你的完整功能看起来像这样：

$("#vertical-menu span").click(function () {
    // slide up all the link lists
    var h3 = "#vertical-menu ul h3";
    $("#vertical-menu ul ul").slideUp();
    $('.plus',h3).html('+');
    var currentH3 = $(this).closest('h3');
    if (!$(currentH3).next().is(":visible")) {
        $(currentH3).next().slideDown();
        $('.plus',currentH3).html('-');
    }
});

示例

$("#vertical-menu span").click(function() {
  //slide up all the link lists
  var h3 = "#vertical-menu ul h3";
  $("#vertical-menu ul ul").slideUp();
  $('.plus', h3).html('+');
  //slide down the link list below the h3 clicked - only if its closed
  var currentH3 = $(this).closest('h3');
  if (!$(currentH3).next().is(":visible")) {
    $(currentH3).next().slideDown();
    $('.plus', currentH3).html('-');
  }
})

/*custom font for text*/
 @import url(http://fonts.googleapis.com/css?family=Nunito);

/*Basic reset*/
 * {
    margin: 0;
    padding: 0;
}
body {
    background: #4EB889;
    font-family: Nunito, arial, verdana;
}
#vertical-menu {
    background: #004050;
    width: 250px;
    margin: 100px auto 0 auto;
    color: white;
    /*box-shadow: 
		0 5px 15px 1px rgba(0, 0, 0, 0.6), 
		0 0 200px 1px rgba(255, 255, 255, 0.5);*/
}
/*heading styles*/
 #vertical-menu h3 {
    font-size: 12px;
    line-height: 34px;
    padding: 0 10px;
    cursor: pointer;
    /*fallback for browsers not supporting gradients*/
    background: #003040;
    background: linear-gradient(#003040, #002535);
}
/*heading hover effect*/
 #vertical-menu h3:hover {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}
/*iconfont styles*/
 #vertical-menu h3 span {
    font-size: 16px;
    margin-right: 10px;
}
/*list items*/
 #vertical-menu li {
    list-style-type: none;
}
/*links*/
 #vertical-menu ul ul li a {
    color: white;
    text-decoration: none;
    font-size: 11px;
    line-height: 27px;
    display: block;
    padding: 0 15px;
    /*transition for smooth hover animation*/
    transition: all 0.15s;
}
/*hover effect on links*/
 #vertical-menu ul ul li a:hover {
    background: #003545;
    /*border-left: 5px solid lightgreen;*/
}
/*Lets hide the non active LIs by default*/
 #vertical-menu ul ul {
    display: none;
}
#vertical-menu li.active ul {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vertical-menu">
  <ul>
    <li>
      <a href="#">Dashboard</a>

    </li>
    <!-- we will keep this LI open by default -->
    <li>

      <h3><span class="plus">+</span><a href="#">Tasks</a></h3>

      <ul>
        <li><a href="#">Today's tasks</a>
        </li>
        <li><a href="#">Urgent</a>
        </li>
        <li><a href="#">Overdues</a>
        </li>
        <li><a href="#">Recurring</a>
        </li>
        <li><a href="#">Settings</a>
        </li>
      </ul>
    </li>
    <li>
      <h3><span class="plus">+</span><a href="#">Favorites</a></h3>

      <ul>
        <li><a href="#">Global favs</a>
        </li>
        <li><a href="#">My favs</a>
        </li>
        <li><a href="#">Team favs</a>
        </li>
        <li><a href="#">Settings</a>
        </li>
      </ul>
    </li>
  </ul>
</div>