Question

我有7个图标都具有相同的大小。图标使用display: inline-block;彼此相邻显示为了解释问题，我想命名图标（A，B，C，D，E，F和G。）

这些图标中的5个是可行的“即。（A，B，D，F，G）”和2隐藏“（即C，E）”

当用户点击图标B时，我想隐藏图标B并显示图标C.此外，当用户点击图标D时，我想隐藏图标D并显示E.

我可以使用show()和hide()来完成我需要的工作。然而，问题在于图标之间的差距是不一样的。

换句话说，当点击图标B后图标C变得可行时，图标A和图标C之间的间隙/边距将显示大于图标A和图标B之间的间隙。

为了虚拟地演示问题，我创建了fiddle page以供审核

如何在不改变2张图像之间的间隙“边距”的情况下进行显示/隐藏？

下面是我的html标记“它也在小提琴中。

<div style="text-align: center; display: block;">

    <div style="display: inline-block;">
        <div id="icwsButtonPhoneOff"><img class="interaction" id="disconnect" src="http://s13.postimg.org/4i0cnu18z/icws_red.png" alt="Disconnect Call" title="Disconnect Call"></div>
    </div>

    <div style="display: inline-block;">
        <div id="icwsButtonHoldOn"><img class="interaction" id="resume" src="http://s15.postimg.org/fbpwulmcn/icws_hold.png" alt="Resume Call" title="Resume"></div>
    </div>

    <div style="display: inline-block;">
        <div id="icwsButtonHoldOff" style="display: none;"><img class="interaction" id="hold" src="http://s17.postimg.org/jsbh1libf/icws_resume.png" alt="Place On Hold" title="Place On Hold"></div>
    </div>

    <div style="display: inline-block;">
        <div id="icwsButtonMuteOn"><img class="interaction" id="unmute" src="http://s7.postimg.org/mgr5tqqpz/icws_unmute.png" alt="Un-Mute Call" title="Un-Mute Call"></div>
    </div>

    <div style="display: inline-block;">
        <div id="icwsButtonMuteOff" style="display: none;"><img class="interaction" id="mute" src="http://s8.postimg.org/vd71colmp/icws_mute.png" alt="Mute Call" title="Mute Call"></div>
    </div>

    <div style="display: inline-block;">
        <div id="icwsButtonTransferCall"><img class="interaction" id="mute" src="http://s18.postimg.org/n4jxcru3p/icws_transfer.png" alt="Transfer Call" title="Transfer Call"></div>
    </div>

    <div style="display: inline-block;">
        <div id="icwsButtonConferenceCall"><img class="interaction" id="mute" src="http://s8.postimg.org/i42b42bnl/icws_conference.png" alt="Start a Conference With all Parties" title="Start a Conference With all Parties"></div>
    </div>
</div>

Answer 1

您正在对错误的元素执行display:none;。对要隐藏的图像的父元素执行display:none;。例如，而不是：

<div style="display: inline-block;">
  <div id="icwsButtonMuteOff" style="display: none;"><img class="interaction" id="mute" src="http://s8.postimg.org/vd71colmp/icws_mute.png" alt="Mute Call" title="Mute Call"></div>
</div>

做：

<div style="display:none;">
  <div id="icwsButtonMuteOff"><img class="interaction" id="mute" src="http://s8.postimg.org/vd71colmp/icws_mute.png" alt="Mute Call" title="Mute Call"></div>
</div>

原因是所有空白空格和/或换行符都在增加。

编辑：

我不想花很多时间在这个小提琴上，但看看我为暂停图标做了些什么。少了很多代码。 https://jsfiddle.net/grtLd0qk/10/

Answer 2

这是因为你显示/隐藏内部div（具有id的那个）而不是外部div。只是做

$('#icwsButtonHoldOff').click(function() {
  $('#icwsButtonHoldOn').parent().show();
  $(this).parent().hide();
});

并将style="display:none;"移动到外部div。

或者甚至更好，您只能有一个div，并为设置display:inline-block的所有7个图标分配一个公共css类。这样，您的javascript只需要切换状态，不再需要.parent()

隐藏/显示图像不会显示在它们之间的均匀空间

2 个答案: