Javascript 使用：：before更改按钮/链接上子元素的高度

我有一个组织结构图，它将在移动设备上运行，与在桌面上运行几乎完全不同。只要有一个小问题，一切都是正常的。“我的组织结构图”的特点是可以单击一个人，然后向下滑动一个手风琴，以提供有关该特定人的更多信息以及联系信息。这个功能在桌面上非常好，但是当它运行到移动设备上时，我的连接器基于CSS中的固定值。我需要在手风琴伸展以对抗此情况时，更改

：：before

高度。我在下面提供了一些照片，以便进一步澄清

之前和之后的图像：

现在我主要关心的是，我把自己放在一个位置，我必须为每个元素编写完全不同的函数，以使特定的元素连接起来

下面是我的HTML的布局：

<ul>
    <li class="director">
        <div id="ss_menu">
            <a href="javascript:void(0);" class="ss_button">
                <span class="title">Director </span><br/>
                <span class="sm-hide">Name of Person</span>
            </a>
            <div class="ss_content">
                <img src="img/person.jpg"
                 width="70px"
                 style="border: 1px solid #000;"/><br/>
                Telephone: 555-555-5555<br/>
                Email: emailaddress@email.com<br/>
                Room: A123<br/>
                Mail Stop: A123
            </div>
        </div>
        <ul>
            <li>
                <div id="ss_menu">
                    <a href="javascript:void(0);" class="ss_button">
                        <span class="title">Assistant to the Director </span><br/>
                        <span class="sm-hide">Name of Person</span>
                    </a>
                    <div class="ss_content">
                        <img src="img/person.jpg"
                         width="70px"
                         style="border: 1px solid #000;"/><br/>
                        Telephone: 555-555-5556<br/>
                        Email: emailaddress@email.com<br/>
                        Room: A124<br/>
                        Mail Stop: A124
                    </div>
                </div>
                <ul>
<! -- THE CODE CONTINUES FOR A WHILE BUT IS LAID OUT THE SAME WAY -->

我基本上是想增加竖线的高度，增加手风琴打开的量

最后，这里是我为手风琴使用的jQuery代码，我想用它来管理我的垂直线

jQuery(function() {
    jQuery('.ss_button').on('click',function() {
        jQuery('.ss_content').slideUp('fast');
        jQuery(this).next('.ss_content').slideDown('fast');
    });
});

---

你应该做的第一件事是修复你的HTML，你缺少2个结束

li

标记和2个结束

ul

标记，以及一个不必要的开始

ul

标记。我还建议对你的jQuery使用不同的方法。目前，如果你点击一个

li

，其中

ss_content

元素已经打开，它将关闭，然后立即重新打开。这只是我代码的摘录。它比那要长得多；然而，这是与另一个相同的格式，所以我觉得没有必要给你360行相同的格式。其次，jQuery现在是一种占位符，在我完成主要设计工作后，我将对它进行润色。

jQuery(function() {
    jQuery('.ss_button').on('click',function() {
        jQuery('.ss_content').slideUp('fast');
        jQuery(this).next('.ss_content').slideDown('fast');
    });
});