小编Big*_*ose的帖子

如何仅在特定屏幕尺寸下使HTML元素可单击

我正在尝试将旧的,定制的网站转换为响应式.我已经完成了大量的CSS工作,并且可以获得我想要的大部分的定位和定位.还有最后一件让我悲伤的作品.

我在页面上显示了一系列新闻文章.当我去手机大小的显示器时,我真的希望这些标题变成"可点击",以便我可以用它们来显示/隐藏文章的细节.但我不希望这些标题在更大的屏幕尺寸下可点击.

每篇文章的基本布局是......

<article id="article-001">
    <div class="newsArticleTitle">Title goes here</div>
    <div class="newsArticleTeaser">
        <p>
            Teaser paragraph</p>
    </div>
    <div class="newsArticleContent">
        <p>
            Paragraph 1</p>
        <p>
            Paragraph 2</p>
    </div>
</article>
Run Code Online (Sandbox Code Playgroud)

随着屏幕尺寸减小,控制这些文章显示的相关CSS是......

@media only screen and (max-width: 479px) {
    .newsArticleTeaser {
        display: none;
    }
}


@media only screen and (max-width: 319px) {
    .newsArticleContent {
        display: none;
    }
}
Run Code Online (Sandbox Code Playgroud)

...因此,在最窄的屏幕尺寸下,只有文章标题可见.然后我需要/希望该文章标题(div with class="newsArticleTitle")然后成为可点击的项目,以便切换预告片和内容的可见性.

是否有理智的方式来实现这一目标?我的回退方法可能是复制标题元素 - 一次用<a>标记包装它,一次没有 - 并用CSS切换这两者的可见性.但这感觉不对.

有没有人更优雅地解决这个问题,或者有更好的方法来设计这个?

html javascript css responsive-design

4
推荐指数
1
解决办法
1151
查看次数

Liquibase 3.3.3拒绝运行"由于maven配置"

在版本2和版本3之间的liquibase中有什么变化吗?

我的pom文件中有以下内容......

        <plugin>
            <groupId>org.liquibase</groupId>
            <artifactId>liquibase-maven-plugin</artifactId>
            <version>3.3.3</version>

            <configuration>
                <changeLogFile>src/main/resources/liquibase/liquibase-changesets.xml</changeLogFile>
                <driver>${db.liquibase.driver}</driver>
                <username>${db.liquibase.username}</username>
                <password>${db.liquibase.password}</password>
                <url>${db.liquibase.url}</url>
                <promptOnNonLocalDatabase>${db.liquibase.promptOnNonLocal}</promptOnNonLocalDatabase>
                <verbose>true</verbose>
            </configuration>


            <executions>
                <execution>
                    <phase>process-resources</phase>
                    <goals>
                        <goal>update</goal>
                    </goals>
                </execution>
            </executions>

            <dependencies>
                <dependency>
                    <groupId>postgresql</groupId>
                    <artifactId>postgresql</artifactId>
                    <version>9.1-901.jdbc4</version>
                </dependency>
            </dependencies>
        </plugin>
Run Code Online (Sandbox Code Playgroud)

当我运行liquibase时,我得到以下内容:更新 ...

------------------------------------------------------------------------
Building ********** 1.0-SNAPSHOT
------------------------------------------------------------------------

--- liquibase-maven-plugin:3.3.3:update (default-cli) @ ********** ---
------------------------------------------------------------------------
Liquibase skipped due to maven configuration
------------------------------------------------------------------------
BUILD SUCCESS
Run Code Online (Sandbox Code Playgroud)

如果我恢复使用liquibase插件的2.0.5版本,这将运行得非常好.

谁能告诉我我做错了什么?

liquibase maven

2
推荐指数
1
解决办法
415
查看次数

标签 统计

css ×1

html ×1

javascript ×1

liquibase ×1

maven ×1

responsive-design ×1