Question

        <div class$="{{_classForListWrapper(filtered)}} conversation-section">
          <div id="convo-list-wrapper" class="conversation-list">
              <gm-conversation-list language-code="{{languageCode}}"                   
                                    first-result="{{firstResult}}"
                                    results="{{results}}">
              </gm-conversation-list>
          </div>
        </div>

        <template is="dom-if" if="{{!filtered}}">
            <div id="convo-tags-wrapper"class="col-md-9 col-lg-8 conversation-chatbox">
              <template is="dom-if" if="{{openConversation}}">
                <gm-conversation
                  id="conversation1"
                  conversation="{{conversation}}"
                  show-tool-tip="{{showToolTip}}"
                  tool-tip-step="{{toolTipStep}}"
                  base-url="{{baseUrl}}"
                ></gm-conversation>
              </template>
          </div>
        </template>

我在桌面视图中有左div和右div。左div有聊天列表。 Right div有一个选定的聊天详细信息。（从左侧聊天列表div中选择的聊天）在移动视图中，应显示左侧聊天列表div。从聊天列表div（左div）中选择特定的聊天后，它应在单独的移动UI中显示所选的聊天详细信息。请帮助我用简单的代码进行解释。

Answer 1

鉴于缺乏信息，这是我能想到的最简单的代码（更改宽度以查看mediaquery效果）：

document.getElementById('btn').addEventListener('click',function(e) {
	let rightSide = document.getElementById('right');
	let leftSide = document.getElementById('left');
	rightSide.style.display = 'block';
	leftSide.style.display = 'none';
	e.preventDefault();
})

.container {
	display: flex;
	color: #fff;
}

.left {
	flex: 3;
	background: red;
}

.right {
	flex: 1;
	background: blue;
}

/* Viewport */
@media (max-width: 576px) {
	.right {
		display: none;
		flex-basis: 100%;
	}
}

<div class="container">
	<div class="left" id="left">
		<a href="#" id="btn">Click here</a>
	</div>
	<div class="right" id="right">Right</div>
</div>

桌面和移动设备视图中的Div位置

1 个答案: